/* Independent editor styles for the AI HTML block module. */
.nevv-editor-dialog--ai-html { width: min(1780px, calc(100vw - 24px)); height: min(1040px, calc(100vh - 24px)); }
.nevv-ai-editor-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.nevv-ai-tab { display: none; min-height: 0; overflow: auto; padding: 20px 22px; }
.nevv-ai-tab.is-active { display: block; }
.nevv-ai-project-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 22px; align-items: start; }
.nevv-ai-project-main,
.nevv-ai-project-side { min-width: 0; }
.nevv-ai-project-side { position: sticky; top: 0; display: grid; gap: 10px; padding: 18px; border: 1px solid #d4dde8; border-radius: 12px; background: #f7f9fc; }
.nevv-ai-project-side h3 { margin: 8px 0 2px; }
.nevv-ai-project-side label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.nevv-ai-project-side input,
.nevv-ai-project-side select { width: 100%; min-height: 38px; }
.nevv-ai-connector-state { margin-bottom: 18px; padding: 14px 16px; border: 1px solid; border-radius: 10px; }
.nevv-ai-connector-state strong,
.nevv-ai-connector-state small { display: block; }
.nevv-ai-connector-state small { margin-top: 4px; line-height: 1.45; }
.nevv-ai-connector-state.is-ready { border-color: #8ac8a0; background: #edf9f1; color: #185c2d; }
.nevv-ai-connector-state.is-missing { border-color: #e0bd75; background: #fff8e8; color: #78500c; }
.nevv-ai-upload-label { display: flex !important; align-items: center; justify-content: center; min-height: 46px; border: 1px dashed #95a7bb; border-radius: 9px; background: #f8fafc; cursor: pointer; }
.nevv-ai-upload-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nevv-ai-reference-preview { display: flex; min-height: 120px; align-items: center; gap: 14px; padding: 12px; border: 1px solid #d4dde8; border-radius: 10px; background: #fff; }
.nevv-ai-reference-preview img { width: 160px; max-height: 120px; object-fit: contain; border-radius: 6px; background: #eef2f6; }
.nevv-ai-reference-preview strong,
.nevv-ai-reference-preview small { display: block; }
.nevv-ai-mapping { margin-top: 18px; border: 1px solid #d4dde8; border-radius: 10px; background: #fff; }
.nevv-ai-mapping summary { padding: 13px 15px; font-weight: 800; cursor: pointer; }
.nevv-ai-mapping > div { padding: 0 15px 15px; }
.nevv-ai-code-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.nevv-ai-code-head strong,
.nevv-ai-code-head small { display: block; }
.nevv-ai-code-head small { margin-top: 3px; color: #66778a; }
.nevv-ai-code-editor { display: block; width: 100%; min-height: calc(100vh - 260px); padding: 16px; border: 1px solid #bac7d6; border-radius: 9px; background: #101820; color: #eaf1f8; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; resize: none; }
.nevv-ai-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nevv-ai-preview-toolbar > div { display: flex; gap: 5px; }
.nevv-ai-preview-toolbar button.is-active { background: #1769d2; color: #fff; }
.nevv-ai-preview-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.nevv-ai-preview-toolbar input { width: 90px; }
.nevv-ai-preview-stage { display: flex; min-height: calc(100vh - 350px); align-items: flex-start; justify-content: center; overflow: auto; padding: 18px; border: 1px solid #c8d3df; border-radius: 10px; background: repeating-conic-gradient(#e8edf3 0 25%, #f8fafc 0 50%) 50% / 20px 20px; }
.nevv-ai-preview-stage iframe { display: block; max-width: 100%; min-height: 640px; border: 1px solid #aebccc; background: #fff; box-shadow: 0 12px 36px rgba(20, 33, 47, .18); }
.nevv-ai-validation { margin-top: 12px; }
.nevv-ai-validation p { margin: 5px 0; padding: 8px 10px; border-radius: 7px; }
.nevv-ai-validation .is-error { background: #fff0ef; color: #9b1d16; }
.nevv-ai-validation .is-warning { background: #fff7df; color: #775309; }
.nevv-ai-validation .is-ok { background: #edf9f1; color: #18602d; }
.nevv-ai-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nevv-ai-history-grid section { min-width: 0; }
.nevv-ai-history-grid article { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 9px; padding: 12px; border: 1px solid #d5dee8; border-radius: 9px; background: #fff; }
.nevv-ai-history-grid strong,
.nevv-ai-history-grid small { display: block; }
.nevv-ai-history-grid p { margin: 5px 0 0; color: #5e6f82; }
.nevv-ai-history-grid code { max-width: 180px; overflow-wrap: anywhere; color: #65778a; font-size: 10px; }
.nevv-ai-project-side dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 0; font-size: 11px; }
.nevv-ai-project-side dt { color: #68798b; }
.nevv-ai-project-side dd { margin: 0; overflow-wrap: anywhere; }
.nevv-ai-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #dce4ed; }
.nevv-ai-progress span { display: block; width: 0; height: 100%; background: #1769d2; transition: width .25s ease; }
.nevv-ai-editor-loading,
.nevv-ai-editor-error { padding: 50px; text-align: center; }
.nevv-ai-editor-error { color: #9b1d16; }
@media (max-width: 980px) {
    .nevv-editor-dialog--ai-html { width: calc(100vw - 8px); height: calc(100vh - 8px); }
    .nevv-ai-project-grid,
    .nevv-ai-history-grid { grid-template-columns: 1fr; }
    .nevv-ai-project-side { position: static; }
    .nevv-ai-code-editor { min-height: 58vh; }
}


.nevv-ai-service-connectors{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin:0 0 14px;padding:10px 12px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:rgba(0,0,0,.025)}
.nevv-ai-service-connectors strong{font-size:13px}
.nevv-ai-service-connectors span{font-size:13px}
.nevv-ai-service-connectors small{flex-basis:100%;opacity:.72}
.nevv-ai-service-connectors.is-empty{opacity:.78}

/* 0.2.2: reliable same-origin sandbox preview document. */
.nevv-ai-preview-stage iframe[data-preview-state="ready"] { background: transparent; }
.nevv-ai-preview-stage iframe[data-preview-state="error"] { background: #fff0ef; }

.nevv-ai-frame-settings { margin-top: 10px; border: 1px solid #d7e0ea; border-radius: 10px; padding: 0 10px 10px; }
.nevv-ai-frame-settings summary { cursor: pointer; padding: 10px 0; font-weight: 700; }
.nevv-ai-frame-settings label { display: block; margin-top: 8px; }
.nevv-ai-frame-settings .is-disabled { opacity: .48; }

/* 0.3.2: fast status synchronization controls. */
.nevv-ai-refresh-actions { display: grid; gap: 6px; margin: 2px 0 8px; }
.nevv-ai-refresh-actions button { width: 100%; min-height: 38px; font-weight: 800; }
.nevv-ai-refresh-actions small { color: #66778a; line-height: 1.35; }

/* 0.3.3: persistent AI task controls. */
.nevv-ai-refresh-buttons { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.nevv-ai-refresh-buttons button { width: auto; }
.nevv-ai-refresh-buttons .is-danger { min-width: 92px; }
@media (max-width: 560px) {
    .nevv-ai-refresh-buttons { grid-template-columns: 1fr; }
    .nevv-ai-refresh-buttons .is-danger { width: 100%; }
}

.nevv-ai-reference-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
.nevv-ai-reference-actions .nevv-ai-upload-label { flex:1 1 260px; margin:0; }
.nevv-ai-reference-actions > button { min-height:46px; padding:0 14px; border:1px solid #b7c4d2; border-radius:9px; background:#fff; color:#223247; font-weight:750; cursor:pointer; }
.nevv-ai-reference-actions > button.is-danger { border-color:#e2aaa5; color:#b42318; }

/* Reference image stays assigned to the project even when excluded from AI input. */
.nevv-ai-reference-toggle { align-items:center; padding:10px 12px; border:1px solid #d4dde8; border-radius:9px; background:#f8fafc; }
.nevv-ai-reference-preview .nevv-ai-reference-state { display:inline-flex; margin-top:7px; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:800; line-height:1.2; }
.nevv-ai-reference-preview .nevv-ai-reference-state.is-connected { background:#e9f8ee; color:#176b35; }
.nevv-ai-reference-preview .nevv-ai-reference-state.is-detached { background:#eef2f6; color:#58677a; }