/* suggestion notation kebab case et BEM (block-name__element-- modifier) 

exemple 
.info-card__title
.info-card__title--highlighted 
.search-box__icon 
.search-box__input


*/

/* ===== AI Config (p_aiconfig.*) ===== */
/* Flush header bar of a panel/card (title left, actions right) — AI Config tabs */
.info__section.info__section--bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    border-radius: 0;
    padding: 5px 8px 5px 12px;
    min-height: 24px;
    font-weight: 600;
    letter-spacing: .2px;
}
.info__section--bar .material_button,
.info__section--bar .material_button2,
.info__section--bar .wq_button {
    background: rgba(255,255,255,.92);
    color: #2e7d6f;
    border: none;
    box-shadow: none;
    border-radius: 3px;
    font-size: 11px;
    font-weight: normal;
    padding: 2px 9px;
    cursor: pointer;
}
.info__section--bar .material_button:hover,
.info__section--bar .material_button2:hover,
.info__section--bar .wq_button:hover {
    background: #fff;
}
.info__section--bar label {
    color: #fff;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
}
.info__section--bar .info__section-sub {
    font-weight: normal;
    font-size: 11px;
    opacity: .85;
}
/* Body of a panel whose header is an .info__section--bar */
.wqai-panel-body {
    padding: 10px 12px;
}
.wqai-panel-body > :first-child {
    margin-top: 0 !important;
}

/* ----- AI Config: spacing / text utilities (replace repeated inline styles) ----- */
.wqai-mt-5  { margin-top: 5px !important; }
.wqai-mt-6  { margin-top: 6px !important; }
.wqai-mt-8  { margin-top: 8px !important; }
.wqai-mt-10 { margin-top: 10px !important; }
.wqai-mt-15 { margin-top: 15px !important; }
.wqai-mb-10 { margin-bottom: 10px !important; }
.wqai-mb-12 { margin-bottom: 12px !important; }
.wqai-mb-15 { margin-bottom: 15px !important; }
.wqai-mb-20 { margin-bottom: 20px !important; }
.wqai-mr-3  { margin-right: 3px !important; }
.wqai-m-10  { margin: 10px !important; }
.wqai-p-15  { padding: 15px !important; }
.wqai-fs-11 { font-size: 11px !important; }
.wqai-fs-12 { font-size: 12px !important; }
.wqai-fs-13 { font-size: 13px !important; }
.wqai-center { text-align: center; }
.wqai-italic { font-style: italic; }
.wqai-muted  { color: #999; }
.wqai-strong { font-weight: bold; color: #333; }
.wqai-meta   { font-size: 11px; color: #666; }
.wqai-note   { font-size: 11px; color: #999; font-style: italic; }
.wqai-hint   { margin-top: 8px; font-style: italic; color: #666; }
.wqai-text-info    { color: #627790; }
.wqai-text-success { color: #2e7d32; }
.wqai-text-danger  { color: #b94a48; }
.wqai-text-error   { color: #c62828; font-weight: bold; }

/* ----- AI Config: states (empty, loading, pending, error) ----- */
.wqai-empty { color: #999; font-style: italic; padding: 10px; }
.wqai-empty--center { text-align: center; padding: 20px; }
.wqai-loading { padding: 20px; text-align: center; color: #666; }
.wqai-error-msg { color: #c62828; padding: 10px; }
.wqai-error-msg--lg { padding: 20px; }
.wqai-error-msg--inline { padding: 0; font-size: 11px; }
.wqai-error {
    color: #c62828;
    padding: 10px;
    border: 1px solid #ef9a9a;
    background: #fff0f0;
    border-radius: 4px;
}
.wqai-error__detail { font-size: 11px; color: #888; margin-top: 4px; }
.wqai-pending { text-align: center; padding: 20px; color: #ff9800; font-size: 11px; }
.wqai-pending--large { padding: 30px; font-size: 13px; }
.wqai-pending__icon { font-size: 24px; margin-bottom: 6px; }
.wqai-pending--large .wqai-pending__icon { font-size: 36px; margin-bottom: 10px; }
.wqai-pending__countdown { font-size: 11px; color: #999; margin-top: 6px; }
.wqai-pending-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    margin-bottom: 10px;
    background: #fff3e0;
    border-radius: 4px;
    font-size: 12px;
    color: #e65100;
}
.wqai-placeholder-icon { font-size: 48px; color: #eee; display: block; margin-bottom: 15px; }

/* ----- AI Config: buttons and form controls ----- */
.wqai-btn-sm { font-size: 11px !important; padding: 3px 10px !important; }
.wqai-btn-xs { font-size: 10px !important; padding: 2px 8px !important; }
.wqai-close  { cursor: pointer; font-size: 18px; color: #999; }
.wqai-choice { margin-right: 10px; font-size: 12px; cursor: pointer; }
.wqai-choice--tight { margin-right: 0; }
.wqai-filter-label  { font-size: 12px; color: #555; font-weight: bold; min-width: 64px; }
.wqai-filter-option { font-size: 12px; color: #333; cursor: pointer; white-space: nowrap; }
.wqai-input-sm { font-size: 12px; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; }

/* ----- AI Config: layout ----- */
.wqai-tab-pane { padding-top: 1px; padding-bottom: 15px; }
.wqai-tab-split { display: flex; height: calc(100% - 80px); }
.wqai-tab-results { flex: 1; display: flex; flex-direction: column; background: #fff; min-width: 0; overflow: hidden; }
.wqai-side-block { padding: 0; border-bottom: 1px solid #ddd; background: #fff; }
.wqai-side-scroll { flex: 1; overflow-y: auto; padding: 0; border-bottom: 1px solid #ddd; }
.wqai-scroll-box { flex: 1; overflow: auto; padding: 10px; max-height: 400px; }
.wqai-row { display: flex; align-items: center; gap: 15px; }
.wqai-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wqai-span-all { grid-column: 1 / -1; margin-top: 2px; }
.wqai-subhead {
    font-weight: bold;
    color: #333;
    font-size: 11px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
}
.wqai-raw {
    background: #f5f5f5;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 11px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ----- AI Config: tables ----- */
.wqai-form-table { width: 100%; table-layout: fixed; white-space: nowrap; border-spacing: 0; }
.wqai-table { width: 100%; border-collapse: collapse; background: #fff; }
.wqai-table--plain { background: transparent; }
.wqai-th { padding: 6px 8px; text-align: left; border-bottom: 1px solid #ddd; }
.wqai-cell { text-align: left; padding: 6px; }
.wqai-cell--top { vertical-align: top; }
.wqai-cell--sm { padding: 4px; }

/* ----- AI Config: generated image results (Labo, Look, Compare, Compare Prompts) ----- */
.wqai-status-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 15px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}
.wqai-status-bar code { font-size: 10px; }
.wqai-gen-list { display: flex; flex-wrap: wrap; gap: 10px; }
.wqai-gen-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    max-width: 300px;
    background: #fff;
}
.wqai-gen-card .wqai-gen-img { max-width: 280px; max-height: 280px; }
.wqai-gen-image { text-align: center; margin-bottom: 10px; }
.wqai-gen-img {
    max-width: 100%;
    border: 1px solid #eee;
    border-radius: 3px;
    cursor: zoom-in;
}
.wqai-gen-caption { font-size: 10px; color: #666; margin-top: 4px; }
.wqai-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.wqai-result-grid--single { grid-template-columns: minmax(0, 1fr); }
.wqai-result-card { border: 1px solid #ddd; border-radius: 4px; background: #fff; min-width: 0; }
.wqai-result-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #f4f6f8;
    border-bottom: 1px solid #ddd;
}
.wqai-result-card__titles { min-width: 0; }
.wqai-result-card__title { font-weight: bold; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqai-result-card__sub { font-size: 10px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqai-result-card__body { padding: 10px; max-height: 420px; overflow: auto; }
.wqai-result-card__actions { text-align: right; padding-top: 4px; }
.wqai-cost-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    color: #2196f3;
    background: #e3f2fd;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ----- AI Config: charts (WQStudioAI.lineChart / barChart, plain SVG / HTML) ----- */
.wqai-chart { width: 100%; max-width: 1100px; }
.wqai-chart__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Roboto, Arial, sans-serif; }
.wqai-chart__summary { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; font-size: 12px; color: #666; }
.wqai-chart__summary b { color: #333; }
.wqai-chart__grid { stroke: #eceff1; stroke-width: 1; }
.wqai-chart__grid--zero { stroke: #b0bec5; }
.wqai-chart__axis { font-size: 13px; fill: #90a4ae; }
.wqai-chart__value { font-size: 13px; font-weight: bold; fill: #37474f; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.wqai-chart__cursor { stroke: #b0bec5; stroke-width: 1; stroke-dasharray: 4 3; visibility: hidden; }
.wqai-chart__tip { visibility: hidden; pointer-events: none; }
.wqai-chart__tip rect { fill: #263238; opacity: 0.92; }
.wqai-chart__tip text { font-size: 13px; fill: #eceff1; }
.wqai-chart__tip .wqai-chart__tip-value { font-weight: bold; fill: #fff; }
.wqai-chart__tip--on,
.wqai-chart__pt:hover .wqai-chart__cursor { visibility: visible; }
.wqai-chart__pt:hover .wqai-chart__dot { stroke-width: 4; }

.wqai-bars { display: flex; flex-direction: column; gap: 4px; max-width: 900px; }
.wqai-bars__row { display: grid; grid-template-columns: minmax(90px, 200px) 1fr auto; align-items: center; gap: 8px; font-size: 11px; padding: 1px 4px; border-radius: 3px; }
.wqai-bars__row:hover { background: #f5f7f9; }
.wqai-bars__label { color: #555; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqai-bars__track { height: 16px; background: #f1f3f4; border-radius: 3px; overflow: hidden; }
.wqai-bars__bar { height: 100%; border-radius: 3px; opacity: 0.85; }
.wqai-bars__row:hover .wqai-bars__bar { opacity: 1; }
.wqai-bars__value { color: #333; font-weight: bold; white-space: nowrap; min-width: 110px; }
.wqai-bars__share { font-weight: normal; color: #999; margin-left: 6px; }

/* ----- AI Config: text costs, calendar + month statistics side by side ----- */
.wqai-cost-month { display: grid; grid-template-columns: minmax(300px, 490px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .wqai-cost-month { grid-template-columns: minmax(0, 1fr); } }
.wqai-cost-month .info__section { margin-bottom: 8px; }
.wqai-month-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.wqai-month-stat { background: #f5f7f9; border-radius: 6px; padding: 10px 12px; }
.wqai-month-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 3px; }
.wqai-month-stat__value { font-size: 16px; font-weight: bold; color: #222; }
.wqai-month-stat__sub { font-size: 10px; color: #888; margin-top: 3px; }
.wqai-cost-month .wqai-bars__row { grid-template-columns: minmax(60px, 90px) 1fr auto; }
.wqai-cost-month .wqai-bars__value { min-width: 90px; }

/* ----- AI Config: chart legend (one entry per series) ----- */
.wqai-chart__legend { display: inline-flex; align-items: center; gap: 6px; }
.wqai-chart__swatch { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }
.wqai-chart__swatch--dashed { border-top-style: dashed; border-top-width: 2px; }

/* ----- AI Config (text): required variables (search + badges) ----- */
.wqai-reqvars { padding: 8px 20px 12px; }
.wqai-reqvars__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wqai-reqvars__search { position: relative; flex: 0 1 380px; min-width: 240px; }
.wqai-reqvars__search input { width: 100%; box-sizing: border-box; }
.wqai-reqvars__results {
    position: absolute; z-index: 50; top: 100%; left: 0; right: 0; margin-top: 2px;
    max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid #cfd8dc;
    border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.wqai-reqvars__result {
    display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px;
    font-family: monospace; font-size: 11px; cursor: pointer; border-bottom: 1px solid #f1f3f4;
}
.wqai-reqvars__result:hover, .wqai-reqvars__result--active { background: #e3f2fd; }
.wqai-reqvars__key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqai-reqvars__key b { color: #1565c0; }
.wqai-reqvars__value {
    font-family: Roboto, Arial, sans-serif; color: #888; max-width: 45%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wqai-reqvars__value--empty { color: #c62828; font-style: italic; }
.wqai-reqvars__none { padding: 8px 10px; }
.wqai-reqvars__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wqai-reqvar {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px;
    font-family: monospace; font-size: 11px; border-radius: 12px; cursor: default;
    background: #eceff1; border: 1px solid #cfd8dc; color: #37474f;
}
.wqai-reqvar--ok    { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.wqai-reqvar--empty { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.wqai-reqvar__remove {
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; color: inherit; opacity: 0.6;
}
.wqai-reqvar__remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }

/* ----- AI Config image: Look / Multi Look tabs (LCT05102026) ----- */
/* Image list of a look: small cells + "Ajouter" cell, drop target of the drag & drop */
.wqai-look-bucket {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 92px;
    padding: 4px;
    border: 1px dashed transparent;
    border-radius: 4px;
    transition: background .15s, border-color .15s;
}
.wqai-look-bucket--over { background: #e3f2fd; border-color: #2196f3; }
.wqai-look-cell {
    position: relative;
    width: 76px;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    cursor: grab;
    box-sizing: border-box;
}
.wqai-look-cell:hover { box-shadow: 0 0 5px rgba(33,150,243,.4); }
.wqai-look-cell img { display: block; width: 68px; height: 68px; object-fit: contain; margin: 0 auto; background: #fafafa; }
.wqai-look-cell__foot { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.wqai-look-cell__ref { flex: 1; min-width: 0; font-size: 9px; color: #555; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqai-look-cell__remove {
    position: absolute; top: -6px; right: -6px; z-index: 1;
    width: 16px; height: 16px; line-height: 16px; border-radius: 50%;
    background: #e53935; color: #fff; font-size: 12px; font-weight: bold; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.wqai-look-cell__open,
.wqai-look-picker__open { flex-shrink: 0; width: 14px; height: 14px; opacity: .8; cursor: pointer; vertical-align: middle; }
.wqai-look-cell__open:hover,
.wqai-look-picker__open:hover { opacity: 1; }
.wqai-look-cell--add {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 88px; border: 2px dashed #bbb; background: #fafafa; color: #888; font-size: 10px; cursor: pointer;
}
.wqai-look-cell--add:hover { border-color: #2196f3; color: #2196f3; }
.wqai-look-cell__plus { font-size: 24px; line-height: 1; }

/* Look tab: prompt | images side by side */
.wqai-look-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid #ddd; }
.wqai-look-layout__col { min-width: 0; }
.wqai-look-layout__col + .wqai-look-layout__col { border-left: 1px solid #ddd; }
.wqai-look-option { display: block; margin-top: 8px; font-size: 11px; color: #555; cursor: pointer; }
.wqai-look-estimate { margin-top: 8px; padding: 6px 8px; background: #f5f7f9; border-radius: 4px; font-size: 11px; color: #555; line-height: 1.6; }
.wqai-look-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Multi Look tab */
.wqai-multilook-run { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; background: #f4f6f8; border-bottom: 1px solid #dde3ea; }
.wqai-multilook-shared { margin: 10px; padding: 8px 10px; border: 1px solid #b3e5fc; border-radius: 4px; background: #f1f9fe; }
.wqai-multilook-shared__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: bold; color: #0277bd; margin-bottom: 4px; }
.wqai-multilook-grid { margin: 0 10px 10px; }
.wqai-multilook-cell { border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa; padding: 10px; min-width: 0; }
.wqai-multilook-cell--off { opacity: .55; }
.wqai-multilook-cell--off:hover { opacity: .85; }
.wqai-multilook-cell__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 12px; }
.wqai-multilook-cell__head label { cursor: pointer; }
.wqai-multilook-cell__images { margin-top: 8px; }
.wqai-multilook-cell__label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: bold; color: #555; margin-bottom: 2px; }

/* Multi-select image picker (WQStudioAI.lookImages) */
.wqai-look-picker { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.wqai-look-picker__box {
    display: flex; flex-direction: column; width: 96vw; max-width: 1800px; height: 92vh;
    background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.3); font-family: Roboto, Arial;
}
.wqai-look-picker__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid #eee; font-weight: bold; }
.wqai-look-picker__search { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid #eee; background: #fafafa; font-size: 11px; color: #666; }
.wqai-look-picker__main { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.wqai-look-picker__results { flex: 0 0 72%; width: 72%; padding: 10px; overflow-y: auto; border-right: 1px solid #eee; box-sizing: border-box; }
.wqai-look-picker__side { flex: 0 0 28%; width: 28%; display: flex; flex-direction: column; overflow: hidden; background: #fffdf5; }
.wqai-look-picker__side-title { flex-shrink: 0; padding: 4px 10px; font-size: 11px; font-weight: bold; color: #555; background: #f0f0f0; border-bottom: 1px solid #ddd; }
.wqai-look-picker__side-title--fav { color: #b8860b; background: #fff8e1; }
.wqai-look-picker__side-list { flex: 1; min-height: 0; overflow-y: auto; }
.wqai-look-picker__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 15px; border-top: 1px solid #eee; background: #fafafa; }
.wqai-look-picker__foot .wqai-meta { margin-right: auto; }
.wqai-look-picker__empty { color: #999; font-style: italic; padding: 14px; text-align: center; font-size: 11px; }
.wqai-look-picker__row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #e5e5e5; font-size: 11px; }
.wqai-look-picker__row--main { border: 2px solid #416567; }
.wqai-look-picker__product { flex: 0 0 15rem; width: 15rem; color: #444; line-height: 1.4; }
.wqai-look-picker__product a { font-size: 10px; }
.wqai-look-picker__cards { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; }
.wqai-look-picker__score { display: inline-block; margin-top: 2px; padding: 0 5px; border-radius: 8px; background: #2196f3; color: #fff; font-size: 9px; font-weight: bold; }
.wqai-look-pick {
    position: relative; width: 84px; padding: 3px; box-sizing: border-box;
    border: 2px solid #e0e0e0; border-radius: 4px; background: #fff; text-align: center; cursor: pointer;
}
.wqai-look-pick:hover { box-shadow: 0 0 5px rgba(33,150,243,.5); }
.wqai-look-pick img { display: block; width: 74px; height: 74px; object-fit: contain; margin: 0 auto; }
.wqai-look-pick--on { border-color: #2196f3; background: #e3f2fd; }
.wqai-look-pick__check {
    display: none; position: absolute; top: 2px; left: 2px; z-index: 1;
    width: 16px; height: 16px; line-height: 16px; border-radius: 50%; background: #2196f3; color: #fff; font-size: 11px;
}
.wqai-look-pick--on .wqai-look-pick__check { display: block; }
.wqai-look-pick__star { position: absolute; top: 0; right: 3px; z-index: 1; font-size: 15px; line-height: 1; color: #bbb; text-shadow: 0 0 2px #fff; }
.wqai-look-pick__star--on { color: #ffb300; }
.wqai-look-pick__view { font-size: 9px; font-weight: bold; color: #9d9d9d; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqai-look-pick__ref { font-size: 9px; color: #555; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- AI Config image: Look params, history comparison (LCT06102026) ----- */
.wqai-look-params { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: #555; }
.wqai-look-params select { font-size: 11px; padding: 2px 4px; max-width: 220px; }
.wqai-multilook-variables { margin: 10px 10px 0; }
/* "Comparer la sélection" bar at the bottom of a history modal */
.wqai-history-compare { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px; border-top: 1px solid #e0e0e0; background: #fafafa; }
.wqai-history-compare .wqai-meta { margin-right: auto; }
/* Side by side comparison (WQStudioAI.renderCompareModal) */
.wqai-cmp-grid { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 12px; overflow: auto; align-items: flex-start; }
.wqai-cmp-col { flex: 1 0 300px; max-width: 480px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.wqai-cmp-col__head { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-bottom: 1px solid #eee; background: #f8f9fa; }
.wqai-cmp-col__head .wqai-cost-badge { align-self: flex-start; }
.wqai-cmp-col__body { padding: 10px; }
.wqai-cmp-col__inputs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.wqai-cmp-col__inputs img { width: 40px; height: 40px; object-fit: contain; border: 1px solid #eee; background: #fafafa; cursor: zoom-in; }
.wqai-cmp-col__prompt { margin-top: 8px; padding: 6px 8px; background: #f5f7f9; border-radius: 4px; font-size: 11px; color: #555; white-space: pre-wrap; max-height: 160px; overflow: auto; }

/* ----- AI Config texte: Admin "Qualité des textes générés" card (LCT06102026) ----- */
.wqai-quality { padding: 15px; background: #fff; border: 1px solid #c5cae9; border-radius: 4px; margin-bottom: 20px; }
.wqai-quality__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wqai-quality__title { font-size: 14px; font-weight: bold; color: #283593; }
.wqai-quality__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wqai-quality__label { font-size: 12px; color: #555; }
.wqai-quality__date { width: 150px; padding: 6px 8px; }
.wqai-quality__check { font-size: 12px; color: #555; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.wqai-quality__check input { margin: 0; }
.wqai-quality__modes { display: flex; align-items: center; gap: 10px; }
.wqai-quality__sep { width: 1px; height: 24px; background: #ddd; margin: 0 6px; }
.wqai-quality__hint { font-size: 11px; color: #888; margin: 10px 0 15px; }
.wqai-quality__warn { padding: 8px 10px; margin-bottom: 12px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 4px; font-size: 12px; color: #6d4c00; }
.wqai-quality__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.wqai-quality__tile { padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa; }
.wqai-quality__tile-label { font-size: 10px; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: .5px; }
.wqai-quality__tile-value { font-size: 22px; font-weight: bold; color: #222; margin: 6px 0 4px; }
.wqai-quality__tile-sub { font-size: 11px; color: #777; }
.wqai-quality__section { font-size: 13px; font-weight: bold; color: #444; margin: 16px 0 8px; }
.wqai-quality__scroll { overflow-x: auto; }
.wqai-quality__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wqai-quality__table th { padding: 6px 8px; background: #eef0f8; border: 1px solid #dde; text-align: left; white-space: nowrap; color: #333; }
.wqai-quality__table td { padding: 6px 8px; border: 1px solid #e6e6e6; vertical-align: top; color: #333; }
/* Edit size distribution: one stacked bar per field, 2px gaps between segments */
.wqai-quality__dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wqai-quality__dist-label { width: 160px; flex-shrink: 0; font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqai-quality__bar { flex: 1; display: flex; gap: 2px; height: 14px; }
.wqai-quality__bar .wqai-quality__seg { flex-basis: 0; min-width: 3px; cursor: default; }
.wqai-quality__bar .wqai-quality__seg:first-child { border-radius: 4px 0 0 4px; }
.wqai-quality__bar .wqai-quality__seg:last-child { border-radius: 0 4px 4px 0; }
.wqai-quality__bar .wqai-quality__seg:only-child { border-radius: 4px; }
.wqai-quality__seg--0 { background: #cfe3f7; }
.wqai-quality__seg--1 { background: #a9cdf0; }
.wqai-quality__seg--2 { background: #7fb3e6; }
.wqai-quality__seg--3 { background: #4f92d6; }
.wqai-quality__seg--4 { background: #2a6fbf; }
.wqai-quality__seg--5 { background: #12407f; }
.wqai-quality__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11px; color: #555; }
.wqai-quality__legend span { display: flex; align-items: center; gap: 5px; }
.wqai-quality__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.wqai-quality__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.wqai-quality__words { margin: 0; padding: 0 0 0 22px; font-size: 12px; color: #333; }
.wqai-quality__words li { padding: 2px 0; }
.wqai-quality__words li span { display: inline-block; min-width: 140px; }
.wqai-quality__words li b { color: #666; font-weight: normal; }
.wqai-quality__trend-col { width: 40%; }
.wqai-quality__trend { display: flex; align-items: center; gap: 8px; }
.wqai-quality__trend-bar { flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.wqai-quality__trend-bar span { display: block; height: 100%; background: #4f92d6; border-radius: 4px; }

/* ----- Prompt editor: prompt caching line (WQStudioAI.promptCacheHTML, LCT06102026) ----- */
.wqai-cache { margin-top: 5px; padding: 5px 8px; border-radius: 4px; font-size: 11px; line-height: 1.4; }
.wqai-cache--ok   { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.wqai-cache--warn { background: #fff8e1; border: 1px solid #ffe082; color: #6d4c00; }
.wqai-cache--info { background: #f5f5f5; border: 1px solid #e0e0e0; color: #666; }

/* ----- AI Config texte: "Améliorer le prompt" modal (LCT06102026) ----- */
.wqai-quality__improve-btn { font-weight: bold; }
.wqai-improve { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.wqai-improve__box { width: 96vw; height: 92vh; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 6px 40px rgba(0,0,0,.35); overflow: hidden; font-family: Roboto, Arial, sans-serif; }
.wqai-improve__head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; }
.wqai-improve__title { font-size: 15px; font-weight: bold; color: #283593; }
.wqai-improve__period { font-size: 12px; color: #777; margin-right: auto; }
.wqai-improve__close { cursor: pointer; font-size: 20px; color: #aaa; }
.wqai-improve__cols { flex: 1; min-height: 0; display: flex; }
.wqai-improve__sessions { width: 220px; flex-shrink: 0; padding: 10px; border-right: 1px solid #eee; overflow-y: auto; background: #fafafa; }
.wqai-improve__session-list { margin-top: 10px; }
.wqai-improve__session { position: relative; padding: 8px 24px 8px 8px; margin-bottom: 6px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fff; cursor: pointer; }
.wqai-improve__session:hover { border-color: #9fa8da; }
.wqai-improve__session--on { border-color: #3949ab; background: #e8eaf6; }
.wqai-improve__session-date { font-size: 12px; font-weight: bold; color: #333; }
.wqai-improve__session-del { position: absolute; top: 6px; right: 6px; font-size: 12px; opacity: .5; }
.wqai-improve__session-del:hover { opacity: 1; }
.wqai-improve__chat { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #eee; }
.wqai-improve__messages { flex: 1; overflow-y: auto; padding: 12px; background: #f7f8fb; }
.wqai-improve__intro { max-width: 640px; font-size: 13px; color: #444; line-height: 1.5; }
.wqai-improve__msg { max-width: 90%; margin-bottom: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; color: #222; }
.wqai-improve__msg--user { margin-left: auto; background: #e3f2fd; }
.wqai-improve__msg--coach { background: #fff; border: 1px solid #e0e0e0; }
.wqai-improve__msg--test { max-width: 100%; background: #fff8e1; border: 1px dashed #ffcc80; font-size: 12px; }
.wqai-improve__msg-time { margin-top: 4px; font-size: 10px; color: #999; }
.wqai-improve__changes { margin: 6px 0 4px; padding-left: 18px; font-size: 12px; }
.wqai-improve__input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eee; }
.wqai-improve__input textarea { flex: 1; height: 60px; resize: vertical; padding: 6px 8px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px; }
.wqai-improve__info { padding: 0 10px 8px; font-size: 11px; color: #888; }
.wqai-improve__proposal { flex: 1.2; min-width: 0; padding: 12px; overflow-y: auto; }
.wqai-improve__section { margin: 12px 0 6px; font-size: 13px; font-weight: bold; color: #444; }
.wqai-improve__section:first-child { margin-top: 0; }
.wqai-improve__prompt { max-height: 260px; overflow: auto; margin: 0; padding: 8px; white-space: pre-wrap; font-size: 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; }
.wqai-improve__prompt-edit { width: 100%; height: 280px; box-sizing: border-box; padding: 8px; resize: vertical; font-family: monospace; font-size: 12px; border: 1px solid #ccc; border-radius: 4px; }
.wqai-improve__vars { margin: 0; padding-left: 18px; font-size: 12px; }
.wqai-improve__test-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: #555; }
.wqai-improve__test-controls input[type=number] { width: 60px; margin-left: 4px; }
.wqai-improve__apply { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid #eee; }
.wqai-improve__verdict { margin: 10px 0; padding: 10px; border-radius: 4px; font-size: 12px; border: 1px solid #e0e0e0; background: #fafafa; }
.wqai-improve__verdict--good { background: #e8f5e9; border-color: #a5d6a7; }
.wqai-improve__verdict--bad  { background: #ffebee; border-color: #ef9a9a; }
.wqai-improve__verdict--same { background: #f5f5f5; }
.wqai-improve__ref { margin-bottom: 6px; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; }
.wqai-improve__ref summary { cursor: pointer; }
.wqai-improve__cmp { margin-top: 8px; }
.wqai-improve__cmp-title { font-weight: bold; color: #555; margin-bottom: 4px; }
.wqai-improve__cmp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wqai-improve__cmp-text { max-height: 220px; overflow: auto; padding: 6px; white-space: pre-wrap; background: #fafafa; border: 1px solid #eee; border-radius: 4px; }