/* 1.2.0 — Page Agent IA : disposition réglages (formulaire + aperçu collant),
   aperçu du widget (mêmes proportions que le widget front, sans style inline),
   conversations (drawer transcript) et leads. Chargé après admin.css
   (Essiow_Admin::enqueue_assets → assets/css/pages/agent.css). */

/* Disposition Réglages */
.essiow-agent-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--essiow-space-4); align-items: start; }
.essiow-agent-side { position: sticky; top: calc(var(--essiow-adminbar) + 12px); }
.essiow-agent-main .essiow-card:last-child { margin-bottom: 0; }
.essiow-agent-status { display: flex; align-items: center; justify-content: space-between; gap: var(--essiow-space-3); flex-wrap: wrap; }
.essiow-agent-status .essiow-switch { margin: 0; }
.essiow-agent-status__hint { margin: 0; font-size: var(--essiow-fs-xs); color: var(--essiow-text-2); }
.essiow-agent-photo { display: flex; align-items: center; gap: var(--essiow-space-3); flex-wrap: wrap; }
.essiow-agent-photo__preview { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--essiow-surface-3); border: 1px solid var(--essiow-border); display: inline-flex; align-items: center; justify-content: center; color: var(--essiow-text-3); flex-shrink: 0; }
.essiow-agent-photo__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.essiow-agent-photo__preview:empty::before { content: ''; }
.essiow-agent-color { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.essiow-agent-color .wp-picker-container { display: inline-block; }
.essiow-agent-color .wp-picker-container .wp-color-result.button { height: 36px; border-radius: var(--essiow-radius); }
.essiow-agent-color__swatches { display: inline-flex; gap: 6px; }
.essiow-agent-color__swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--essiow-surface); box-shadow: 0 0 0 1px var(--essiow-border); cursor: pointer; padding: 0; }
.essiow-agent-color__swatch[data-color="#4F46E5"] { background: #4F46E5; }
.essiow-agent-color__swatch[data-color="#3858e9"] { background: #3858e9; }
.essiow-agent-color__swatch[data-color="#0f172a"] { background: #0f172a; }
.essiow-agent-color__swatch[data-color="#16a34a"] { background: #16a34a; }
.essiow-agent-color__swatch[data-color="#d97706"] { background: #d97706; }
.essiow-agent-color__swatch[data-color="#dc2626"] { background: #dc2626; }
.essiow-agent-color__swatch:hover, .essiow-agent-color__swatch:focus-visible { box-shadow: 0 0 0 2px var(--essiow-primary); outline: none; }
.essiow-agent-pos { display: inline-flex; }
.essiow-agent-pos > label { cursor: pointer; margin: 0; padding: 6px 12px; border-radius: 6px; font-size: var(--essiow-fs-xs); font-weight: 500; color: var(--essiow-text-2); }
.essiow-agent-pos > label.is-active { background: var(--essiow-surface); color: var(--essiow-text); box-shadow: var(--essiow-shadow-sm); }
.essiow-agent-pos > label:focus-within { box-shadow: 0 0 0 2px var(--essiow-primary-ring); }
.essiow-agent-main textarea { min-height: 72px; }
.essiow-agent-main .essiow-field--row .essiow-field__control { max-width: none; }
.essiow-agent-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--essiow-space-3); }
.essiow-agent-bank .essiow-field { margin-bottom: 0; }
.essiow-agent-quota { margin-top: 6px; }

/* Aperçu du widget */
.essiow-agent-preview { position: relative; height: 560px; background: var(--essiow-surface-3); border: 1px solid var(--essiow-border); border-radius: var(--essiow-radius-lg); overflow: hidden; background-image: radial-gradient(var(--essiow-border) 1px, transparent 1px); background-size: 16px 16px; --essiow-agent-color: #4F46E5; }
.essiow-agent-preview__bubble { position: absolute; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--essiow-agent-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); padding: 0; transition: transform 150ms var(--essiow-ease); overflow: hidden; }
.essiow-agent-preview__bubble:hover { transform: scale(1.05); }
.essiow-agent-preview__bubble .essiow-icon { width: 26px; height: 26px; }
.essiow-agent-preview__bubble img { width: 100%; height: 100%; object-fit: cover; display: none; }
.essiow-agent-preview__bubble.has-photo img { display: block; }
.essiow-agent-preview__bubble.has-photo .essiow-icon { display: none; }
.essiow-agent-preview__bubble::after { content: ''; position: absolute; bottom: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.essiow-agent-preview--left .essiow-agent-preview__bubble { right: auto; left: 20px; }
.essiow-agent-preview__window { position: absolute; bottom: 88px; right: 20px; width: min(340px, calc(100% - 40px)); height: 420px; background: var(--essiow-surface); border-radius: 16px; border: 1px solid var(--essiow-border); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); display: flex; flex-direction: column; overflow: hidden; }
.essiow-agent-preview--left .essiow-agent-preview__window { right: auto; left: 20px; }
.essiow-agent-preview__window.essiow-hidden { display: none; }
.essiow-agent-preview__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--essiow-agent-color); color: #fff; flex-shrink: 0; }
.essiow-agent-preview__avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.22); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.essiow-agent-preview__avatar img { width: 100%; height: 100%; object-fit: cover; display: none; }
.essiow-agent-preview__avatar.has-photo img { display: block; }
.essiow-agent-preview__avatar.has-photo .essiow-icon { display: none; }
.essiow-agent-preview__name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.essiow-agent-preview__online { font-size: 11px; opacity: 0.85; }
.essiow-agent-preview__msgs { flex: 1; padding: 14px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; background: var(--essiow-surface); }
.essiow-agent-preview__msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; background: var(--essiow-surface-3); color: var(--essiow-text); border-bottom-left-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.essiow-agent-preview__msg--user { align-self: flex-end; background: var(--essiow-agent-color); color: #fff; border-radius: 14px; border-bottom-right-radius: 4px; }
.essiow-agent-preview__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--essiow-border); flex-shrink: 0; }
.essiow-agent-preview__foot span { flex: 1; height: 36px; border: 1px solid var(--essiow-border); border-radius: 18px; padding: 0 14px; display: flex; align-items: center; color: var(--essiow-text-3); font-size: 13px; background: var(--essiow-surface); }
.essiow-agent-preview__send { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--essiow-agent-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.essiow-agent-preview__send .essiow-icon { width: 16px; height: 16px; }

/* Conversations / leads */
#essiow-agent-page .essiow-card__padded .essiow-filters { margin-bottom: 0; }
.essiow-agent-excerpt { display: block; max-width: 420px; color: var(--essiow-text-2); font-size: var(--essiow-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.essiow-agent-lead-msg { max-width: 360px; font-size: var(--essiow-fs-xs); color: var(--essiow-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#essiow-agent-conv-pagination.essiow-hidden, #essiow-agent-leads-pagination.essiow-hidden { display: none; }
#essiow-agent-conv-pagination .essiow-pagination, #essiow-agent-leads-pagination .essiow-pagination { width: 100%; }

/* Drawer transcript */
.essiow-agent-chat { display: flex; flex-direction: column; gap: 10px; }
.essiow-agent-chat__msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: var(--essiow-fs-base); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--essiow-surface-3); color: var(--essiow-text); border-bottom-left-radius: 4px; align-self: flex-start; }
.essiow-agent-chat__msg--user { align-self: flex-end; background: var(--essiow-primary); color: #fff; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.essiow-agent-chat__meta { display: block; margin-top: 4px; font-size: 11px; opacity: 0.7; }
.essiow-agent-chat__tools { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.essiow-agent-chat__tools .essiow-badge { font-size: 10px; }
.essiow-agent-lead { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; font-size: var(--essiow-fs-base); }
.essiow-agent-lead dt { color: var(--essiow-text-2); font-weight: 500; margin: 0; }
.essiow-agent-lead dd { margin: 0; overflow-wrap: anywhere; }

@media screen and (max-width: 1024px) {
    .essiow-agent-layout { grid-template-columns: 1fr; }
    .essiow-agent-side { position: static; }
}