#codeEditorModal { padding: 0 !important; }
#codeEditorModal .modal-dialog { width: 100%; max-width: 100% !important; height: 100vh; height: 100dvh; margin: 0; }
#codeEditorModal .modal-content { height: 100% !important; max-height: 100%; border: 0; border-radius: 0; overflow: hidden; }
#codeEditorModal .modal-header { background: #fff !important; color: #182230 !important; border-bottom: 1px solid #d0d5dd; border-radius: 0; }
#codeEditorModal .btn-close { filter: none; }
#codeEditorModal .modal-body { min-height: 0; overflow: hidden; }
#codeEditorModal .modal-body > .bg-light { flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
#codeEditorModal .modal-footer { flex-shrink: 0; border-radius: 0; background: #fff; }
#codeEditorModal .avc-code-layout { flex: 1; display: flex; min-height: 0; overflow: hidden; }
#codeEditorModal .avc-code-context { width: 250px; flex-shrink: 0; overflow: auto; padding: 20px; background: #f8fafc; border-right: 1px solid #e4e7ec; font-size: 13px; }
#codeEditorModal .avc-code-context h6 { margin-top: 20px; color: #667085; }
#codeEditorModal .avc-code-context p { white-space: pre-wrap; overflow-wrap: anywhere; }
#codeEditorModal #aceEditorContainer { flex: 1; min-width: 0; min-height: 0; }
#avcCodeDraftStatus { margin-right: auto; font-size: 12px; color: #475467; }
#avcCodeDraftStatus[data-error="true"] { color: #b42318; }
/* Recipe-style studio: navigation above, data at left, code and checks at right. */
#codeEditorModal .avc-studio-brand { background: #222; color: #f4f4f5; padding: 10px 22px; font-size: 12px; letter-spacing: 1px; flex-shrink: 0; }
#codeEditorModal .modal-header { padding: 0 16px 0 0; min-height: 70px; gap: 16px; flex-shrink: 0; }
#codeEditorModal .avc-studio-language { align-self: stretch; display: flex; align-items: center; justify-content: center; background: #f58b32; color: white; min-width: 72px; font: bold 22px monospace; }
#codeEditorModal .modal-title { font-size: 20px; min-width: 100px; max-width: 25vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#codeEditorModal .avc-studio-tabs { display: flex; align-self: stretch; margin-right: auto; }
#codeEditorModal .avc-studio-tab { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 16px; color: #667085; font-weight: 600; white-space: nowrap; }
#codeEditorModal .avc-studio-tab.active { border-bottom-color: #555; color: #222; }
#codeEditorModal .avc-studio-save { background: white !important; border: 1px solid #479bfa !important; color: #2988ed; border-radius: 0; white-space: nowrap; }
#codeEditorModal .avc-code-context { width: 290px; padding: 0; background: #f5f5f5; }
#codeEditorModal .avc-studio-side-tabs { display: flex; background: #efefef; border-bottom: 1px solid #ddd; }
#codeEditorModal .avc-studio-side-tabs button { flex: 1; border: 0; padding: 20px 10px; background: transparent; font-weight: 600; color: #666; border-bottom: 3px solid transparent; }
#codeEditorModal .avc-studio-side-tabs button.active { border-bottom-color: #444; color: #222; }
#codeEditorModal .avc-studio-section-title { font-size: 17px; color: #777; padding: 22px 16px 10px; margin: 0; }
#codeEditorModal .avc-studio-data-row { background: white; padding: 20px 16px; margin: 0; border-bottom: 1px solid #ddd; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
#codeEditorModal .avc-studio-help { padding: 16px; color: #667085; font-size: 12px; line-height: 1.6; }
#codeEditorModal .avc-studio-center { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; padding: 16px 20px 0; background: #f2f2f2; }
#codeEditorModal .avc-studio-center > .bg-light { flex-shrink: 0; min-height: 52px; flex-wrap: wrap; gap: 8px; border: 1px solid #ddd; background: #f4f4f4 !important; }
#codeEditorModal #aceEditorContainer { border: 1px solid #ddd; }
#codeEditorModal .avc-studio-actions { display: flex; gap: 8px; padding: 12px 0; flex-shrink: 0; }
#codeEditorModal .avc-studio-actions .btn { border-radius: 0; font-size: 13px; font-weight: 700; }
#codeEditorModal .avc-studio-run { background: #80bc3e; color: #fff; }
#codeEditorModal .avc-studio-pane { flex: 1; overflow: auto; background: white; padding: 24px; min-height: 0; }
#codeEditorModal .avc-studio-pane h2 { font-size: 20px; }
#codeEditorModal .avc-studio-pane pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: #f8fafc; }
#codeEditorModal .avc-studio-option { display: block; margin: 24px 0; max-width: 320px; }
#codeEditorModal .avc-studio-draft { border: 1px solid #ddd; padding: 16px; margin: 12px 0; }
#codeEditorModal .modal-footer { min-height: 42px; padding: 6px 20px; background: #f2f2f2; }
#codeEditorModal [hidden] { display: none !important; }
@media(max-width: 1100px) {
    #codeEditorModal .modal-header { flex-wrap: wrap; gap: 8px; }
    #codeEditorModal .avc-studio-tabs { order: 5; width: 100%; overflow-x: auto; }
    #codeEditorModal .modal-title { max-width: 55vw; margin-right: auto; }
    #codeEditorModal .avc-studio-language { min-height: 52px; }
    #codeEditorModal .avc-code-context { width: 230px; }
}
@media(max-width: 700px) {
    #codeEditorModal .avc-studio-center { padding: 6px 6px 0; }
    #codeEditorModal .avc-studio-tab { padding: 10px; font-size: 12px; }
    #codeEditorModal .avc-studio-brand { padding: 6px 12px; }
    #codeEditorModal .avc-studio-actions { flex-wrap: wrap; }
}
.avc-code-validation { flex-shrink: 0; max-height: 180px; overflow: auto; padding: 10px 16px; border-top: 1px solid #d0d5dd; background: #f8fafc; font-size: 13px; }
.avc-code-validation[data-state="valid"] { border-left: 4px solid #16a34a; }
.avc-code-validation[data-state="invalid"], .avc-code-validation[data-state="unavailable"] { border-left: 4px solid #dc2626; }
.avc-code-diagnostic { display: block; text-align: left; border: 0; background: transparent; color: #b42318; padding: 6px 0; text-decoration: underline; }
@media(max-width: 700px) {
    #codeEditorModal .avc-code-context { display: none; }
    #codeEditorModal .modal-footer { padding: 8px; }
    #avcCodeDraftStatus { flex-basis: 100%; }
}

/* Keep the available viewport for source code, with compact surrounding controls. */
#codeEditorModal .modal-dialog { margin: 0 !important; height: 100dvh !important; }
#codeEditorModal .modal-content { max-height: 100dvh !important; }
#codeEditorModal .avc-studio-brand { padding: 2px 12px; font-size: 10px; line-height: 16px; letter-spacing: .6px; }
#codeEditorModal .modal-header { min-height: 40px; padding: 0 10px 0 0; gap: 10px; }
#codeEditorModal .avc-studio-language { min-width: 44px; min-height: 40px; font-size: 17px; }
#codeEditorModal .modal-title { font-size: 15px; }
#codeEditorModal .avc-studio-tab { padding: 7px 12px; font-size: 12px; }
#codeEditorModal .avc-studio-save { padding: 4px 10px; font-size: 12px; background: #2563eb !important; border: 1px solid #2563eb !important; color: #fff; border-radius: 6px; font-weight: 600; }
#codeEditorModal .avc-studio-save:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff; }
#codeEditorModal .avc-studio-save:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
#codeEditorModal .avc-studio-splitter { flex: 0 0 7px; cursor: col-resize; touch-action: none; background: #e4e7ec; position: relative; }
#codeEditorModal .avc-studio-splitter::after { content: ''; position: absolute; width: 3px; height: 32px; border-radius: 3px; background: #98a2b3; top: 50%; left: 2px; transform: translateY(-50%); }
#codeEditorModal .avc-studio-splitter:hover,
#codeEditorModal .avc-studio-splitter:focus-visible { background: #bfdbfe; outline: none; }
#codeEditorModal .avc-studio-resizing { user-select: none; cursor: col-resize; }
#codeEditorModal .avc-studio-resizing #aceEditorContainer { pointer-events: none; }
#codeEditorModal .avc-code-indicator { display: inline-flex; align-items: center; gap: 6px; align-self: center; font-size: 12px; color: #475467; white-space: nowrap; }
#codeEditorModal .avc-code-indicator::before { content: ''; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #98a2b3; }
#codeEditorModal .avc-code-indicator[data-state="checking"]::before { background: #2563eb; }
#codeEditorModal .avc-code-indicator[data-state="valid"]::before { background: #16a34a; }
#codeEditorModal .avc-code-indicator[data-state="invalid"]::before { background: #dc2626; }
#codeEditorModal .avc-code-indicator[data-state="unsupported"]::before,
#codeEditorModal .avc-code-indicator[data-state="unavailable"]::before { background: #d97706; }
#codeEditorModal .avc-studio-center { padding: 4px 6px 0; }
#codeEditorModal .avc-studio-center > .bg-light { min-height: 36px; gap: 6px; padding: 4px 6px !important; }
#codeEditorModal .avc-studio-center > .bg-light .form-label { font-size: 12px; }
#codeEditorModal .avc-studio-center > .bg-light .btn,
#codeEditorModal .avc-studio-center > .bg-light .form-select { font-size: 12px; padding-top: 4px; padding-bottom: 4px; min-height: 28px; }
#codeEditorModal #aceEditorContainer { height: auto !important; flex: 1 1 0; }
#codeEditorModal .avc-code-validation { padding: 4px 10px; font-size: 12px; max-height: min(140px, 22vh); }
#codeEditorModal .avc-code-validation[data-state="valid"] { display: none; }
#codeEditorModal .avc-studio-actions { gap: 6px; padding: 0; }
#codeEditorModal .avc-studio-actions .btn { padding: 4px 10px; font-size: 12px; }
#codeEditorModal .modal-footer { min-height: 30px; padding: 2px 8px; gap: 6px; align-items: center; }
#codeEditorModal .modal-footer > * { margin: 0; }
#codeEditorModal .modal-footer .btn { padding: 3px 10px; font-size: 12px; }
#codeEditorModal #avcCodeDraftStatus { flex: 1; min-width: 0; font-size: 11px; line-height: 1.3; }
#codeEditorModal .avc-studio-side-tabs button { padding: 10px; font-size: 12px; }
@media(max-width: 700px) {
    #codeEditorModal .avc-studio-tab { padding: 6px 9px; }
    #codeEditorModal .avc-studio-splitter { display: none; }
    #codeEditorModal #avcCodeDraftStatus { flex: 1 1 160px; }
}