/* ===== CloudFormation v2.0 — Complete Production Stylesheet ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #F8F7FF; --surface: #FFFFFF; --surface2: #F3F4F6;
  --border: #E5E7EB; --border2: #D1D5DB;
  --text: #111827; --text2: #374151; --text3: #6B7280;
  --purple: #7C3AED; --purple-light: #EDE9FE; --purple-dark: #5B21B6;
  --aws: #FF9900; --azure: #0078D4; --gcp: #4285F4; --ibm: #0F62FE; --oci: #F80000; --vmware: #607078; --k8s: #326CE5; --alibaba: #FF6A00;
  --red: #DC2626; --green: #16A34A; --amber: #D97706; --blue: #2563EB;
  --sidebar-w: 260px; --right-w: 300px; --header-h: 52px; --toolbar-h: 44px; --footer-h: 28px; --strip-h: 0px;
  --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); height: 100vh; height: 100dvh; overflow: hidden; font-size: 13px; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 12px; }
code { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 11px; }

/* Mobile-only controls are hidden by default; the breakpoint media query
   at the bottom of this file reveals them and adapts the layout. */
.mobile-drawer-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text2); cursor: pointer; transition: all .15s; padding: 0; }
.mobile-drawer-toggle i { font-size: 19px; line-height: 1; color: inherit; }
.mobile-drawer-toggle:hover { background: var(--surface2); }
.mobile-drawer-toggle:active { background: var(--purple-light); color: var(--purple); border-color: var(--purple); transform: scale(.95); }
.drawer-backdrop { display: none; }
.mobile-more-menu { display: none; }
.mobile-cloud-tabs { display: none !important; }   /* hide in sidebar on desktop - shown on mobile */
.drawer-mobile-header { display: none !important; }   /* mobile sidebar header - hidden on desktop */
.mobile-cloud-strip { display: none !important; }    /* mobile cloud strip - hidden on desktop */

/* ── Header ─────────────────────────────────────────────────────────────── */
/* NOTE: header-left/header-right intentionally do NOT mirror --sidebar-w/
   --right-w. Those vars only set the *initial* sidebar width; resize.js
   adjusts each sidebar's actual width independently via inline style, so
   tying the header to the same vars would desync the header from the real
   sidebar width and force the header narrower or wider than it needs to be.
   The header sizes itself by its own content instead. */
.app-header { height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; gap: 12px; z-index: 100; position: relative; flex-wrap: nowrap; }
.header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; overflow: hidden; }
.header-right { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo-text { font-size: 15px; font-weight: 700; color: var(--purple); letter-spacing: -0.3px; }
.logo-badge { font-size: 10px; background: var(--purple-light); color: var(--purple); padding: 1px 6px; border-radius: 10px; font-weight: 600; }
.cloud-tabs { display: flex; background: var(--surface2); border-radius: 8px; padding: 3px; gap: 2px; flex-shrink: 1; overflow-x: auto; max-width: 100%; }
.cloud-tab { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text3); display: flex; align-items: center; gap: 5px; transition: all .15s; flex-shrink: 0; white-space: nowrap; }
.cloud-tab.active { background: white; color: var(--text); box-shadow: var(--shadow); }
.cloud-tab[data-cloud="aws"].active { color: var(--aws); }
.cloud-tab[data-cloud="azure"].active { color: var(--azure); }
.cloud-tab[data-cloud="gcp"].active { color: var(--gcp); }
.cloud-tab[data-cloud="ibm"].active { color: var(--ibm); }
.cloud-tab[data-cloud="oci"].active { color: var(--oci); }
.cloud-tab[data-cloud="vmware"].active { color: var(--vmware); }
.cloud-tab[data-cloud="k8s"].active { color: var(--k8s); }
.cloud-tab[data-cloud="alibaba"].active { color: var(--alibaba); }
.cloud-tab[data-cloud="multi"].active { color: var(--purple); }
.header-divider { width: 1px; height: 24px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
.env-selector { display: flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; flex-shrink: 0; }
.env-selector select { border: none; background: none; font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; padding: 0; }
.env-selector i { font-size: 14px; color: var(--text3); }
.btn-header { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text2); border: 1px solid var(--border); background: var(--surface); transition: all .15s; flex-shrink: 0; white-space: nowrap; }
.btn-header:hover { background: var(--surface2); border-color: var(--border2); }
.header-desktop-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 1; }
.btn-generate { background: var(--purple) !important; color: white !important; border-color: var(--purple-dark) !important; flex-shrink: 0; }
.btn-generate:hover { background: var(--purple-dark) !important; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.app-body { display: flex; height: calc(100vh - var(--header-h) - var(--footer-h) - var(--strip-h)); height: calc(100dvh - var(--header-h) - var(--footer-h) - var(--strip-h)); overflow: hidden; }

/* ── Left Sidebar ─────────────────────────────────────────────────────────── */
.sidebar-left { width: var(--sidebar-w); min-width: 200px; max-width: 520px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
.palette-search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); position: relative; }
.palette-search i { color: var(--text3); font-size: 14px; flex-shrink: 0; }
.palette-search input { flex: 1; border: none; background: none; outline: none; font-size: 12px; color: var(--text); }
.search-clear { color: var(--text3); padding: 2px 4px; border-radius: 4px; font-size: 13px; }
.search-clear:hover { background: var(--surface2); }
.palette-content { flex: 1; overflow-y: auto; }
.palette-section { border-bottom: 1px solid var(--border); }
.palette-section-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; user-select: none; }
.palette-section-header:hover { background: var(--surface2); }
.palette-section-header.collapsed .section-chevron { transform: rotate(-90deg); }
.section-chevron { transition: transform .2s; font-size: 13px; }
.palette-items { display: flex; flex-direction: column; }
.palette-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; cursor: grab; transition: background .1s; }
.palette-item:hover { background: var(--surface2); }
.palette-item:active { cursor: grabbing; background: var(--purple-light); }
.pi-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.pi-info { min-width: 0; flex: 1; }
.pi-name { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-type { font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-add-btn { display: none; width: 26px; height: 26px; border-radius: 6px; align-items: center; justify-content: center; color: var(--purple); background: var(--purple-light); flex-shrink: 0; font-size: 14px; }
.pi-add-btn:hover { background: var(--purple); color: white; }

/* ── Canvas Area ─────────────────────────────────────────────────────────── */
.canvas-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.canvas-toolbar { height: var(--toolbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 10px; gap: 4px; }
.toolbar-left { display: flex; align-items: center; gap: 4px; flex: 1; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }
.tool-group { display: flex; align-items: center; gap: 2px; }
.tool-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.tool-btn { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 15px; transition: all .15s; border: 1px solid transparent; }
.tool-btn:hover { background: var(--surface2); color: var(--text); }
.tool-btn.active { background: var(--purple-light); color: var(--purple); border-color: #C4B5FD; }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tool-btn.danger-btn:hover { background: #FEF2F2; color: var(--red); }
.zoom-label { width: auto; padding: 0 6px; font-size: 11px; font-weight: 600; color: var(--text3); }
.canvas-stats { font-size: 11px; color: var(--text3); white-space: nowrap; }
.validation-badge { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 10px; }
.validation-badge.error { background: #FEE2E2; color: var(--red); }
.validation-badge.ok { background: #DCFCE7; color: var(--green); }
.canvas-viewport { flex: 1; overflow: hidden; position: relative; background: var(--bg); touch-action: none; }
.canvas-viewport.drag-over { background: #F0EDFE; }
.canvas-svg { width: 100%; height: 100%; user-select: none; touch-action: none; }
.canvas-drop-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; transition: opacity .2s; padding: 24px; }
.canvas-drop-hint.hidden { opacity: 0; pointer-events: none; }
.drop-hint-title { font-size: 15px; font-weight: 600; color: var(--purple); margin-top: 12px; max-width: 640px; line-height: 1.5; pointer-events: none; }
.drop-hint-sub { font-size: 10px; color: var(--text3); margin-top: 8px; max-width: 560px; line-height: 1.6; pointer-events: none; }
.drop-hint-drag { font-size: 15px; color: var(--text3); margin-top: 8px; pointer-events: none; }
.btn-template-hint { pointer-events: all; margin-top: 18px; background: var(--purple); color: white; padding: 10px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; box-shadow: 0 2px 8px rgba(124,58,237,.35); transition: background .15s, box-shadow .15s; }
.btn-template-hint:hover { background: var(--purple-dark); box-shadow: 0 4px 12px rgba(124,58,237,.45); }

/* ── Right Sidebar ─────────────────────────────────────────────────────────── */
.sidebar-right { width: var(--right-w); min-width: 240px; max-width: 560px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
.right-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 4px; }
.rtab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 9px 4px; font-size: 11px; font-weight: 500; color: var(--text3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; white-space: nowrap; }
.rtab:hover { color: var(--text); }
.rtab.active { color: var(--purple); border-bottom-color: var(--purple); }
.rtab i { font-size: 14px; }
/* Individual panels that scroll vertically */
#propsPanel, #varsPanel, #historyPanel { overflow-y: auto; }
/* Output panel uses nested flex for the code area to fill remaining height */
#outputPanel { overflow: hidden; }
/* BUGFIX: must be display:flex so child flex:1 works in the desktop sidebar column.
   Mobile was working because its drawer has a fixed pixel height; desktop needs flex. */
.rtab-content { flex: 1; display: none; flex-direction: column; overflow: hidden; min-height: 0; }
.rtab-content.active { display: flex; }
.no-selection { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--text3); text-align: center; padding: 20px; gap: 8px; font-size: 12px; }

/* ── Properties panel ─────────────────────────────────────────────────────── */
.props-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.props-title-block { flex: 1; min-width: 0; }
.props-cloud-badge { font-size: 10px; font-weight: 700; }
.props-resource-type { font-size: 13px; font-weight: 600; color: var(--text); }
.props-header-actions { display: flex; gap: 4px; }
.icon-btn { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text3); }
.icon-btn:hover { background: var(--surface2); }
.icon-btn.danger:hover { background: #FEE2E2; color: var(--red); }
.props-validation { padding: 8px 12px; background: #FEF2F2; border-bottom: 1px solid #FECACA; }
.val-error { display: flex; align-items: flex-start; gap: 6px; color: var(--red); font-size: 11px; padding: 2px 0; }
.val-error i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.props-section { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.section-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.props-field { display: flex; flex-direction: column; gap: 4px; }
.props-field input, .props-field select, .props-field textarea { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); font-size: 12px; outline: none; transition: border-color .15s; }
.props-field input:focus, .props-field select:focus, .props-field textarea:focus { border-color: var(--purple); background: white; }
.props-field textarea { min-height: 64px; resize: vertical; }
.props-field.inline-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; }
.props-field.inline-4 label { font-size: 10px; color: var(--text3); display: block; margin-bottom: 2px; }
.props-field.inline-4 input { padding: 4px 6px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); cursor: pointer; }
.checkbox-label input { width: 14px; height: 14px; accent-color: var(--purple); }
.tag-row { display: flex; gap: 4px; margin-bottom: 4px; }
.tag-del { width: 22px; height: 22px; color: var(--text3); border-radius: 4px; flex-shrink: 0; }
.tag-del:hover { background: #FEE2E2; color: var(--red); }
.btn-add-tag { font-size: 11px; color: var(--purple); padding: 3px 0; display: flex; align-items: center; gap: 4px; }
.multi-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; width: 100%; }
.multi-actions button { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 4px; justify-content: center; }
.multi-actions button:hover { background: var(--purple-light); color: var(--purple); }
.multi-actions .btn-danger-sm { background: #FEE2E2 !important; color: var(--red) !important; grid-column: span 2; }

/* Security findings in props */
.sec-finding { display: flex; align-items: flex-start; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.sec-finding:last-child { border-bottom: none; }
.sev-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
.sev-high .sev-badge { background: #FEE2E2; color: var(--red); }
.sev-medium .sev-badge { background: #FEF3C7; color: var(--amber); }
.sev-low .sev-badge { background: #DBEAFE; color: var(--blue); }

/* ── Code output tab ─────────────────────────────────────────────────────── */
.output-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.file-select { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); font-size: 12px; }
.output-btn-group { display: flex; gap: 4px; }
.btn-out { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text2); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.btn-out:hover { background: var(--purple-light); color: var(--purple); }
.btn-out.primary { background: var(--purple); color: white; border-color: var(--purple-dark); }
.btn-out.primary:hover { background: var(--purple-dark); }
.diff-bar { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: #DBEAFE; color: var(--blue); font-size: 11px; font-weight: 600; }
.diff-bar button { margin-left: auto; }
.code-output { flex: 1; overflow-y: auto; padding: 10px 12px; background: #1E1E2E; margin: 0; font-size: 11px; line-height: 1.6; min-height: 0; }
.code-output code { color: #CDD6F4; white-space: pre; display: block; }
.tf-kw { color: #CBA6F7; font-weight: 600; }
.tf-str { color: #A6E3A1; }
.tf-comment { color: #6C7086; font-style: italic; }
.tf-bool { color: #FAB387; }
.tf-num { color: #F38BA8; }
.output-footer { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.btn-paste-plan, .btn-share { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text2); font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.btn-paste-plan:hover { background: var(--purple-light); color: var(--purple); }
.btn-share:hover { background: var(--purple-light); color: var(--purple); }

/* ── Variables tab ───────────────────────────────────────────────────────── */
.vars-toolbar { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.vars-title { font-size: 12px; font-weight: 600; flex: 1; }
.vars-btn-group { display: flex; gap: 4px; }
.btn-sm { padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 4px; }
.btn-sm:hover { background: var(--purple-light); color: var(--purple); }
.env-tabs-bar { display: flex; padding: 6px 8px; gap: 4px; border-bottom: 1px solid var(--border); }
.env-tab { padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; color: var(--text3); border: 1px solid transparent; }
.env-tab.active { background: var(--purple-light); color: var(--purple); border-color: #C4B5FD; }
.var-item { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.var-row-top { display: flex; gap: 4px; margin-bottom: 4px; }
.var-row { display: flex; gap: 4px; margin-bottom: 4px; }
.var-name { flex: 1; min-width: 0; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); font-size: 11px; font-family: 'SF Mono', monospace; }
.var-type { width: 90px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); font-size: 11px; }
.var-del { width: 22px; flex-shrink: 0; color: var(--text3); border-radius: 4px; }
.var-del:hover { background: #FEE2E2; color: var(--red); }
.var-row input { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); font-size: 11px; }

/* ── History tab ─────────────────────────────────────────────────────────── */
.history-toolbar { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.history-toolbar .btn-sm { margin-left: auto; }
.history-item { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text2); }
.history-item.future { opacity: 0.4; }
.history-item i { font-size: 13px; color: var(--text3); flex-shrink: 0; }
.history-time { font-size: 10px; color: var(--text3); margin-left: auto; }
.history-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 11px; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.search-overlay { align-items: flex-start; padding-top: 80px; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; max-height: 80vh; overflow: hidden; }
.modal.sm { width: 320px; }
.modal.md { width: 520px; }
.modal.lg { width: 760px; max-height: 85vh; }
.modal-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 52px; }
.modal-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-title i { font-size: 16px; flex-shrink: 0; color: var(--purple); }
.modal-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; flex-wrap: nowrap; }
.modal-close { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text3); flex-shrink: 0; }
.modal-close:hover { background: var(--surface2); color: var(--text); }
.modal-header > button:not(.btn-header):not(.btn-primary) { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text3); flex-shrink: 0; }
.modal-header > button:not(.btn-header):not(.btn-primary):hover { background: var(--surface2); }
.modal-header .btn-header { padding: 5px 10px; font-size: 12px; gap: 4px; }
.modal-header .btn-header i { font-size: 13px; }
.modal-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.btn-primary { background: var(--purple); color: white; padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.btn-primary:hover { background: var(--purple-dark); }

/* File menu */
.file-menu-list { display: flex; flex-direction: column; padding: 6px; }
.file-menu-list button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px; color: var(--text2); }
.file-menu-list button:hover { background: var(--purple-light); color: var(--purple); }
.menu-separator { height: 1px; background: var(--border); margin: 4px 6px; }
.recent-files-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text3); padding: 6px 10px 4px; }
.recent-item { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 11px; color: var(--text3); border-radius: 5px; }
.recent-item i { font-size: 13px; }
.recent-item span { margin-left: auto; font-size: 10px; opacity: 0.6; }
.muted-sm { font-size: 11px; color: var(--text3); padding: 6px 10px; }

/* Templates */
.template-filters { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* ── Template Modal ──────────────────────────────────────────────────── */
.tpl-overlay { align-items: center; justify-content: center; }
.tpl-modal {
  width: min(1100px, 96vw);
  height: min(760px, 90vh);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}

/* Header */
.tpl-modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--surface);
}
.tpl-modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.tpl-modal-title i { font-size: 18px; color: var(--purple); }
.tpl-count-badge {
  background: var(--purple-light); color: var(--purple);
  border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600;
}
.tpl-search-wrap {
  flex: 1; max-width: 280px; position: relative;
}
.tpl-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 14px; pointer-events: none;
}
.tpl-search-input {
  width: 100%; padding: 7px 12px 7px 32px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface2); color: var(--text);
  font-size: 13px; outline: none;
  transition: border-color .15s;
}
.tpl-search-input:focus { border-color: var(--purple); }
.tpl-close-btn {
  width: 32px; height: 32px; border-radius: 8px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 16px; flex-shrink: 0;
}
.tpl-close-btn:hover { background: var(--surface2); color: var(--text); }

/* Complexity bar */
.tpl-complexity-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface2); flex-shrink: 0;
}
.tpl-cx-label { font-size: 11px; font-weight: 600; color: var(--text3); margin-right: 4px; white-space: nowrap; }
.tpl-cx-btn {
  padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text2); cursor: pointer; transition: all .12s; white-space: nowrap;
}
.tpl-cx-btn:hover { border-color: var(--cc, var(--purple)); color: var(--cc, var(--purple)); }
.tpl-cx-btn.active { background: var(--cc, var(--purple)); color: #fff; border-color: var(--cc, var(--purple)); }

/* Body layout */
.tpl-body {
  display: flex; flex: 1; overflow: hidden;
}

/* Industry sidebar */
.tpl-sidebar {
  width: 190px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
}
.tpl-ind-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px; width: 100%;
  font-size: 12px; font-weight: 500; color: var(--text2);
  text-align: left; transition: all .12s;
}
.tpl-ind-btn i { font-size: 15px; flex-shrink: 0; color: var(--text3); }
.tpl-ind-btn:hover { background: var(--surface2); color: var(--text); }
.tpl-ind-btn:hover i { color: var(--purple); }
.tpl-ind-btn.active { background: var(--purple-light); color: var(--purple); font-weight: 700; }
.tpl-ind-btn.active i { color: var(--purple); }

/* Grid area */
.tpl-grid-wrap {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px;
  /* Prevent scroll from bubbling to modal */
  overscroll-behavior: contain;
}
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Template cards */
.tpl-card {
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 14px; cursor: pointer;
  transition: all .15s; background: var(--surface);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}
.tpl-card:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 20px rgba(124,58,237,.12);
  transform: translateY(-2px);
  background: var(--purple-light);
}
.tpl-card-top { display: flex; align-items: flex-start; gap: 10px; }
.tpl-card-icon { font-size: 28px; line-height: 1.2; flex-shrink: 0; }
.tpl-card-info { flex: 1; min-width: 0; }
.tpl-card-name { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.tpl-card-desc { font-size: 11px; color: var(--text2); line-height: 1.45; }
.tpl-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tpl-cloud-pill {
  border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700;
}
.tpl-ind-pill {
  background: var(--surface2); color: var(--text3);
  border-radius: 6px; padding: 2px 7px; font-size: 10px;
}
.tpl-resource-count { font-size: 10px; color: var(--text3); }
.tpl-cx-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; color: #fff;
  letter-spacing: .3px;
}

/* Empty state */
.tpl-empty {
  grid-column: 1/-1;
  padding: 60px 20px; text-align: center;
  color: var(--text3); font-size: 14px;
}
.tpl-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .4; }

/* Old filter kept for backward compat */
.tpl-filter { display: none; }
.template-filters { display: none; }
.template-grid { display: none; }

/* Mobile */

/* ── AI Panel Enhancements ────────────────────────────────────────────── */
.ai-live-badge {
  display: none; align-items: center; gap: 5px;
  background: #D1FAE5; color: #065F46;
  border-radius: 12px; padding: 2px 8px;
  font-size: 10px; font-weight: 600; margin-left: 6px;
  animation: aiFadeIn .3s ease;
}
.ai-pulse {
  width: 6px; height: 6px; background: #10B981;
  border-radius: 50%; display: inline-block;
  animation: aiPulse 1.2s infinite;
}
@keyframes aiPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
@keyframes aiFadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

.ai-canvas-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
  background: var(--surface2); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 11px; color: var(--text2);
}
.ai-canvas-stats span { display: flex; align-items: center; gap: 4px; }
.ai-canvas-stats i { color: var(--purple); }

.ai-type-summary {
  margin-top: 10px; padding: 8px 10px;
  background: var(--surface2); border-radius: 8px;
  font-size: 11px; color: var(--text2); line-height: 1.5;
}
.ai-type-summary code { color: var(--purple); font-size: 10px; }

.ai-empty {
  text-align: center; padding: 30px 10px;
  color: var(--text3); font-size: 13px; line-height: 1.6;
}
.ai-empty i { font-size: 32px; display: block; margin-bottom: 10px; opacity: .4; }

.ai-analysis-header { display: none; } /* replaced by ai-canvas-stats */

.sev-high { border-color: #FCA5A5 !important; background: #FEF2F2 !important; }
.sev-medium { border-color: #FCD34D !important; background: #FFFBEB !important; }
.sev-low { border-color: #93C5FD !important; background: #EFF6FF !important; }
.ai-sev-pill { border-radius: 6px; padding: 1px 6px; font-size: 9px; font-weight: 700; margin-left: auto; }
.sev-high .ai-sev-pill { background: #FCA5A5; color: #7F1D1D; }
.sev-medium .ai-sev-pill { background: #FCD34D; color: #78350F; }
.sev-low .ai-sev-pill { background: #93C5FD; color: #1E3A5F; }

.ai-clean { padding: 16px; text-align: center; color: var(--text2); font-size: 13px; line-height: 1.6; }
.ai-clean i { font-size: 24px; color: #10B981; display: block; margin-bottom: 6px; }
.ai-clean small { color: var(--text3); }

.ai-user-msg { 
  background: var(--purple); color: #fff;
  border-radius: 12px 12px 4px 12px; padding: 8px 12px;
  font-size: 12px; margin: 6px 0 6px 24px; line-height: 1.4;
}
.ai-msg { 
  background: var(--surface2); border-radius: 4px 12px 12px 12px;
  padding: 8px 12px; font-size: 12px; line-height: 1.55;
  margin: 6px 24px 6px 0; color: var(--text);
}
.ai-msg strong { color: var(--purple); }
.ai-msg code { font-family: monospace; font-size: 11px; background: rgba(124,58,237,.08); padding: 1px 4px; border-radius: 4px; }

@media (max-width: 640px) {
  :root { --strip-h: 40px; }
  .mobile-cloud-strip { display: flex !important; height: var(--strip-h); align-items: center; flex-shrink: 0; overflow-x: auto; gap: 4px; padding: 4px 8px; background: var(--surface2); border-bottom: 1px solid var(--border); }
  .mobile-cloud-tabs { display: flex !important; }
  .header-center { display: none !important; }   /* hide top cloud tabs on mobile — use strip instead */
  .tpl-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .tpl-sidebar { display: none; }
  .tpl-grid { grid-template-columns: 1fr; }
  .tpl-complexity-bar { gap: 4px; padding: 6px 10px; }
  .tpl-cx-btn { padding: 3px 8px; font-size: 10px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.1 additions — palette rendering, toasts, drawers, mobile overhaul
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette (rendered by app-core.js) ── */
.palette-summary { padding: 6px 12px; font-size: 10px; color: var(--text3); border-bottom: 1px solid var(--border); background: var(--surface2); position: sticky; top: 0; z-index: 2; }
.palette-cat { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; background: none; border: none; cursor: pointer; }
.palette-cat:hover { background: var(--surface2); }
.palette-cat i { transition: transform .15s; font-size: 13px; }
.palette-cat.collapsed i { transform: rotate(-90deg); }
.palette-cat span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-cat em { font-style: normal; font-size: 10px; background: var(--surface2); border-radius: 8px; padding: 1px 6px; color: var(--text3); }
.pi-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.pi-name { flex: 1; font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-add { width: 22px; height: 22px; border-radius: 5px; display: none; align-items: center; justify-content: center; color: var(--purple); background: var(--purple-light); flex-shrink: 0; cursor: pointer; }
.palette-item:hover .pi-add { display: flex; }
.palette-more { display: block; width: calc(100% - 24px); margin: 4px 12px 8px; padding: 6px; font-size: 11px; color: var(--purple); background: var(--purple-light); border: none; border-radius: 6px; cursor: pointer; }
.palette-more:hover { filter: brightness(.96); }
.palette-empty { padding: 32px 16px; text-align: center; color: var(--text3); }
.palette-empty i { font-size: 28px; opacity: .5; }
.palette-empty p { font-size: 12px; margin-top: 8px; }

/* ── Toasts ── */
.toast-container { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 10000; pointer-events: none; }
.toast { background: #1F2937; color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); transition: all .3s cubic-bezier(.21,1.02,.73,1); max-width: 90vw; }
.toast-show { opacity: 1; transform: translateY(0); }
.toast-success { background: #065F46; }
.toast-error { background: #991B1B; }
.toast-warning { background: #92400E; }

/* ── Mobile drawers ── */
.drawer-backdrop.visible { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 890; }
.mobile-more-menu.open { display: flex; flex-direction: column; position: fixed; top: calc(var(--header-h) + 4px); right: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 950; overflow: hidden; }
.mobile-more-menu.open button { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; color: var(--text2); background: none; border: none; border-bottom: 1px solid var(--border); text-align: left; }
.mobile-more-menu.open button:last-child { border-bottom: none; }
.mobile-more-menu.open button:active { background: var(--surface2); }

/* ══════════════ MOBILE ≤ 900px — tablet drawer layout ══════════════ */
@media (max-width: 900px) {
  .sidebar-left, .sidebar-right {
    position: fixed; top: 0; bottom: 0; z-index: 900;
    transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.18);
    background: var(--surface);
  }
  .sidebar-left { left: 0; width: min(320px, 86vw); transform: translateX(-105%); }
  .sidebar-right { right: 0; width: min(340px, 88vw); transform: translateX(105%); }
  .sidebar-left.drawer-open, .sidebar-right.drawer-open { transform: translateX(0); }
  .drawer-mobile-header { display: flex !important; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
  .drawer-close-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--surface2); border: none; color: var(--text2); font-size: 16px; }
  .resize-handle { display: none !important; }
  .mobile-drawer-toggle { display: flex !important; }
}

/* ══════════════ MOBILE ≤ 640px — phone layout ══════════════ */
@media (max-width: 640px) {
  :root { --header-h: 52px; }

  /* Header: compact — logo + essential actions only */
  .app-header { padding: 0 8px; gap: 6px; }
  .logo-badge, .env-selector, .header-divider { display: none !important; }
  .header-desktop-actions .btn-header:not(.btn-generate) { display: none; }
  .btn-header { padding: 8px 10px; }
  .btn-generate { padding: 8px 12px !important; font-size: 12px !important; }

  /* Canvas toolbar: horizontally scrollable, larger touch targets */
  .canvas-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 6px; gap: 6px; }
  .canvas-toolbar::-webkit-scrollbar { display: none; }
  .tool-btn { min-width: 40px; min-height: 40px; font-size: 16px; }
  .tool-group { gap: 2px; }
  .tool-divider { display: none; }

  /* Bigger palette rows for touch */
  .palette-item { padding: 11px 14px; }
  .palette-item .pi-add { display: flex; }         /* always show add btn on touch */
  .pi-icon { width: 30px; height: 30px; font-size: 16px; }
  .pi-name { font-size: 13px; }
  .palette-cat { padding: 12px 14px; font-size: 12px; }
  .palette-search input { font-size: 16px; }        /* prevents iOS zoom-on-focus */

  /* Footer: single horizontal scrollable row */
  .app-footer { overflow-x: auto; scrollbar-width: none; }
  .app-footer::-webkit-scrollbar { display: none; }

  /* Floating action buttons stack */
  .ai-fab { bottom: 76px; right: 12px; width: 46px; height: 46px; }

  /* Modals: full-screen sheets */
  .modal-overlay > div:not(.spotlight), .modal { width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; }

  /* Minimap: hide on phones (too small to be useful) */
  #minimap, .minimap { display: none !important; }

  /* Context menu: bigger touch rows */
  .ctx-menu button { padding: 12px 18px; font-size: 14px; }

  /* Properties panel form controls */
  .sidebar-right input, .sidebar-right select, .sidebar-right textarea { font-size: 16px; min-height: 40px; }
}

/* ══════════════ Small phones ≤ 400px ══════════════ */
@media (max-width: 400px) {
  .logo-text { font-size: 13px; }
  .mobile-cloud-strip .cloud-tab { padding: 6px 9px; font-size: 11px; }
}

/* ══════════════ Touch devices — regardless of width ══════════════ */
@media (pointer: coarse) {
  .palette-item { cursor: pointer; }
  .tool-btn, .btn-header, .cloud-tab { min-height: 38px; }
  .node-resize-handle { width: 18px !important; height: 18px !important; }
}

/* ══════════════ Landscape phones ══════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --header-h: 44px; --footer-h: 24px; --strip-h: 0px; }
  .mobile-cloud-strip { display: none !important; }
}

/* ══════════════ Schema as Code (SaC) ══════════════ */
.sac-modal { width: min(1180px, 96vw); height: min(760px, 92vh); background: var(--surface); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.sac-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sac-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.sac-title i { color: var(--purple); font-size: 18px; }
.sac-badge { font-size: 10px; background: var(--purple-light); color: var(--purple); padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.sac-header-actions { display: flex; align-items: center; gap: 8px; }
.sac-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text2); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: all .15s; }
.sac-btn:hover { background: var(--surface2); }
.sac-btn-primary { background: var(--purple); color: #fff; border-color: var(--purple-dark); }
.sac-btn-primary:hover { background: var(--purple-dark); }
.sac-close { width: 30px; height: 30px; border-radius: 7px; border: none; background: var(--surface2); color: var(--text2); font-size: 15px; cursor: pointer; }
.sac-body { flex: 1; display: grid; grid-template-columns: 230px 1fr 380px; overflow: hidden; }
.sac-sidebar { border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface2); }
.sac-list-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; }
.sac-list-item:hover { background: var(--surface); }
.sac-list-item.active { background: var(--surface); border-left: 3px solid var(--purple); padding-left: 9px; }
.sac-list-item > i { color: var(--purple); font-size: 16px; flex-shrink: 0; }
.sli-info { flex: 1; min-width: 0; }
.sli-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sli-meta { font-size: 10px; color: var(--text3); }
.sli-del { width: 24px; height: 24px; border-radius: 5px; border: none; background: none; color: var(--text3); cursor: pointer; opacity: 0; }
.sac-list-item:hover .sli-del { opacity: 1; }
.sli-del:hover { background: #FEE2E2; color: #DC2626; }
.sac-list-empty { padding: 24px 12px; text-align: center; font-size: 12px; color: var(--text3); }
.sac-editor { padding: 16px; overflow-y: auto; }
.sac-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--text3); padding: 24px; }
.sac-empty i { font-size: 42px; opacity: .4; margin-bottom: 12px; }
.sac-empty h3 { font-size: 16px; color: var(--text2); margin-bottom: 6px; }
.sac-empty p { font-size: 12px; max-width: 380px; line-height: 1.6; margin-bottom: 16px; }
.sac-meta-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sac-name-input { flex: 1; font-size: 16px; font-weight: 700; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.sac-meta-row select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text2); background: var(--surface); max-width: 180px; }
.sac-desc-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text2); margin-bottom: 14px; }
.sac-fields-header { display: grid; grid-template-columns: 1.2fr .8fr 36px .8fr 1.2fr 30px; gap: 6px; padding: 0 2px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text3); }
.sac-field-row { display: grid; grid-template-columns: 1.2fr .8fr 36px .8fr 1.2fr 30px; gap: 6px; margin-bottom: 6px; align-items: center; }
.sac-field-row input[type="text"], .sac-field-row input:not([type]), .sac-field-row select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text); width: 100%; }
.sac-field-row input[type="checkbox"] { justify-self: center; width: 15px; height: 15px; accent-color: var(--purple); }
.sac-field-row button { width: 26px; height: 26px; border-radius: 5px; border: none; background: none; color: var(--text3); cursor: pointer; }
.sac-field-row button:hover { background: #FEE2E2; color: #DC2626; }
.sac-add-field { margin-top: 8px; }
.sac-hint { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 12px; }
.sac-hint-ok { background: #ECFDF5; color: #065F46; }
.sac-hint-warn { background: #FFFBEB; color: #92400E; }
.sac-preview { border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: #0F172A; }
.sac-preview-header { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.sac-preview-header select { flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: #1E293B; color: #E2E8F0; font-size: 12px; }
.sac-preview-header .sac-btn { background: #1E293B; border-color: rgba(255,255,255,.15); color: #94A3B8; }
.sac-preview-header .sac-btn:hover { background: #334155; }
.sac-code { flex: 1; overflow: auto; padding: 14px; font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; line-height: 1.6; color: #A5F3FC; white-space: pre; margin: 0; }
/* Import modal */
.sac-import-modal { width: min(640px, 94vw); max-height: 88vh; background: var(--surface); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.sac-import-body { padding: 16px 18px; overflow-y: auto; }
.sac-import-tabs { display: flex; gap: 4px; background: var(--surface2); border-radius: 8px; padding: 3px; margin-bottom: 12px; }
.sac-itab { flex: 1; padding: 7px; border: none; background: none; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; }
.sac-itab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
#sacImportText { width: 100%; height: 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; resize: vertical; color: var(--text); }
.sac-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; border: 2px dashed var(--border2); border-radius: 10px; cursor: pointer; color: var(--text3); transition: all .15s; }
.sac-dropzone.over, .sac-dropzone:hover { border-color: var(--purple); background: var(--purple-light); }
.sac-dropzone i { font-size: 30px; }
.sac-dropzone span { font-size: 13px; font-weight: 600; color: var(--text2); }
.sac-dropzone em { font-size: 11px; font-style: normal; }
.sac-file-name { margin-top: 8px; font-size: 12px; color: var(--text2); }
.sac-import-detect { margin: 10px 0; font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; min-height: 18px; }
.sac-import-detect i { color: var(--purple); }
.sac-import-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.sac-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); }
.sac-check input { accent-color: var(--purple); }
.sac-import-result { margin-top: 10px; }
/* SaC mobile */
@media (max-width: 900px) {
  .sac-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .sac-sidebar { max-height: 130px; border-right: none; border-bottom: 1px solid var(--border); }
  .sac-preview { border-left: none; border-top: 1px solid var(--border); max-height: 240px; }
  .sac-fields-header { display: none; }
  .sac-field-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
  .sac-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .sac-import-modal { width: 100vw; max-height: 100dvh; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.2 — footer, spotlight search, mobile drawer polish, missing panels
   ══════════════════════════════════════════════════════════════════════════ */

/* ── App Footer: full horizontal status bar ── */
.app-footer { height: var(--footer-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; background: var(--surface); border-top: 1px solid var(--border); font-size: 11px; color: var(--text3); flex-shrink: 0; white-space: nowrap; z-index: 50; position: relative; }
.footer-left, .footer-center, .footer-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.footer-center { flex: 1; justify-content: center; overflow: hidden; }
.footer-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.footer-item i { font-size: 12px; }
.footer-divider { width: 1px; height: 12px; background: var(--border); flex-shrink: 0; }
.footer-link { color: var(--text3); text-decoration: none; transition: color .15s; }
.footer-link:hover { color: var(--purple); }
.footer-version { opacity: .7; }
#footerValidationStatus.footer-status-error { color: #DC2626; }
#footerValidationStatus.footer-status-warn { color: #D97706; }
#footerSaveStatus.footer-status-pending { color: #D97706; }

/* ── Spotlight search (Cmd+K style) ── */
.search-overlay { align-items: flex-start !important; padding-top: 12vh; }
.spotlight { width: min(560px, 92vw); background: var(--surface); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.spotlight-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.spotlight-input i { font-size: 17px; color: var(--text3); flex-shrink: 0; }
.spotlight-input input { flex: 1; border: none; outline: none; background: none; font-size: 15px; color: var(--text); }
.spotlight-input input::placeholder { color: var(--text3); }
.spotlight-input kbd { font-size: 10px; font-family: inherit; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; color: var(--text3); flex-shrink: 0; }
.spotlight-filters { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.sf { padding: 4px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 11.5px; font-weight: 500; color: var(--text3); cursor: pointer; transition: all .15s; }
.sf:hover { background: var(--surface2); }
.sf.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.spotlight-results { flex: 1; overflow-y: auto; padding: 6px; }
.spotlight-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; transition: background .1s; }
.spotlight-item:hover { background: var(--surface2); }
.si-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.si-info { flex: 1; min-width: 0; }
.si-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-type { font-size: 11px; color: var(--text3); font-family: 'SF Mono', Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-cloud { font-size: 10px; font-weight: 700; letter-spacing: .4px; flex-shrink: 0; }
.spotlight-empty { padding: 36px 16px; text-align: center; color: var(--text3); }
.spotlight-empty i { font-size: 30px; opacity: .45; }
.spotlight-empty p { font-size: 13px; margin-top: 8px; }

/* ── Minimap ── */
.minimap { position: absolute; bottom: 14px; right: 14px; width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12)); overflow: hidden; z-index: 60; }
.minimap-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text3); border-bottom: 1px solid var(--border); }
.minimap canvas { display: block; }
.minimap-viewport { position: absolute; border: 1.5px solid var(--purple); background: rgba(124,58,237,.08); pointer-events: none; }

/* ── AI panel ── */
.ai-panel { position: fixed; bottom: 76px; right: 16px; width: min(380px, 92vw); max-height: min(560px, 70vh); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; z-index: 800; }
.ai-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text); }
.ai-panel-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ai-panel-footer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.ai-panel-footer input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text); }
.ai-panel-footer button { width: 36px; height: 36px; border-radius: 8px; border: none; background: var(--purple); color: #fff; cursor: pointer; }
.ai-thinking { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text3); padding: 8px 0; }
.ai-dots { display: inline-flex; gap: 3px; }
.ai-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: aiPulse 1.2s infinite; }
.ai-dots span:nth-child(2) { animation-delay: .2s; }
.ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aiPulse { 0%,80%,100% { opacity: .25; transform: scale(.85);} 40% { opacity: 1; transform: scale(1);} }

/* ── Security scan / Cost panels ── */
.scan-summary, .cost-summary { display: flex; gap: 14px; padding: 12px 14px; background: var(--surface2); border-radius: 10px; margin-bottom: 12px; font-size: 12.5px; color: var(--text2); flex-wrap: wrap; }
.scan-results, .cost-list { display: flex; flex-direction: column; gap: 8px; }
.cost-note { font-size: 11px; color: var(--text3); margin-top: 10px; line-height: 1.5; }
.btn-export-cost, .btn-clear-output { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); cursor: pointer; }
.btn-export-cost:hover, .btn-clear-output:hover { background: var(--surface2); }
.plan-paste-area { width: 100%; min-height: 160px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; resize: vertical; color: var(--text); }
.props-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.btn-generate-label { display: inline; }
.resize-handle-left, .resize-handle-right { width: 5px; cursor: col-resize; background: transparent; transition: background .15s; flex-shrink: 0; }
.resize-handle-left:hover, .resize-handle-right:hover { background: var(--purple-light); }

/* ══════════════ Mobile drawer — production polish ══════════════ */
@media (max-width: 900px) {
  /* Drawer sits ABOVE the mobile cloud strip and header shadows */
  .sidebar-left, .sidebar-right { z-index: 920; border-radius: 0 16px 16px 0; display: flex; flex-direction: column; }
  .sidebar-right { border-radius: 16px 0 0 16px; }
  .drawer-backdrop.visible { z-index: 910; backdrop-filter: blur(1.5px); }

  /* In-drawer cloud tabs: tidy wrapping pill grid, not a cut-off row */
  .sidebar-left .mobile-cloud-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface2); }
  .sidebar-left .mobile-cloud-tabs .cloud-tab { justify-content: center; padding: 8px 4px; font-size: 11.5px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); min-height: 36px; }
  .sidebar-left .mobile-cloud-tabs .cloud-tab.active { border-color: currentColor; box-shadow: none; font-weight: 700; }

  .drawer-mobile-header { flex-shrink: 0; background: var(--surface); }
  .palette-search { flex-shrink: 0; }
  .palette-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 12px); }

  /* Category rows: card-like separation for touch scanning */
  .palette-cat { border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 1; }
  .palette-summary { top: 0; }
}

@media (max-width: 640px) {
  /* Footer: full row, horizontally scrollable, never clipped */
  :root { --footer-h: 30px; }
  .app-footer { gap: 10px; padding: 0 10px; }
  .footer-center { flex: 0 0 auto; }
  .footer-left, .footer-right { flex: 0 0 auto; }

  /* Drawer covers most of screen width for comfortable browsing */
  .sidebar-left { width: min(340px, 90vw); }

  /* Spotlight: full-width sheet near top */
  .search-overlay { padding-top: 8px; }
  .spotlight { width: 96vw; max-height: 82dvh; border-radius: 12px; }
  .spotlight-input input { font-size: 16px; }   /* no iOS zoom */
  .sf { min-height: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.2b — As-Code modal suites (CaC/PaC/PiC/DaC), cost, security findings
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared as-code modal shell ── */
.cac-modal, .dac-modal, .pac-modal, .pic-modal { width: min(1120px, 96vw); height: min(740px, 92vh); background: var(--surface); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.cac-body, .dac-body, .pac-body, .pic-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.cac-sidebar, .dac-sidebar, .pac-sidebar, .pic-sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface2); overflow-y: auto; padding: 10px; }
.cac-main, .dac-main, .pac-main, .pic-main { flex: 1; overflow-y: auto; padding: 16px; min-width: 0; }
.cac-section-title, .dac-section-title, .pac-section-title, .pic-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin: 14px 0 8px; }
.cac-empty, .dac-empty, .pac-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: var(--text3); gap: 8px; }
.dac-empty-sm { padding: 16px; text-align: center; color: var(--text3); font-size: 12px; }
.cac-toolbar, .dac-code-toolbar, .pac-editor-toolbar, .pic-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.dac-tabs, .pac-tabs { display: flex; gap: 4px; background: var(--surface2); border-radius: 8px; padding: 3px; margin-bottom: 12px; }
.dac-tab, .pac-tab { flex: 1; padding: 7px 10px; border: none; background: none; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; white-space: nowrap; }
.dac-tab.active, .pac-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.dac-tab-content, .pac-tab-content { min-height: 0; }

/* ── CaC (Config as Code) ── */
.cac-env-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.cac-env-name { font-weight: 600; }
.cac-env-meta { font-size: 10px; color: var(--text3); }
.cac-tab-del { border: none; background: none; color: var(--text3); cursor: pointer; margin-left: 4px; }
.cac-tab-del:hover { color: #DC2626; }
.cac-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.cac-table, .cac-vars-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cac-table th, .cac-vars-table th { text-align: left; padding: 8px 10px; background: var(--surface2); color: var(--text3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); }
.cac-table td, .cac-vars-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.cac-var-row:hover { background: var(--surface2); }
.cac-var-name { font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; color: var(--text); }
.cac-input, .cac-select { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text); background: var(--surface); }
.cac-del-btn { width: 26px; height: 26px; border: none; background: none; border-radius: 5px; color: var(--text3); cursor: pointer; }
.cac-del-btn:hover { background: #FEE2E2; color: #DC2626; }
.cac-output { background: #0F172A; color: #A5F3FC; border-radius: 10px; padding: 12px; font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; overflow: auto; max-height: 300px; white-space: pre; }
.cac-output-header { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.cac-backend-info, .cac-workspace-info { background: var(--surface2); border-radius: 10px; padding: 12px; font-size: 12px; margin-top: 10px; }
.cac-backend-item { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text2); }
.cac-compare-bar, .cac-diff-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--purple-light); border-radius: 8px; font-size: 12px; color: var(--purple); margin-bottom: 10px; flex-wrap: wrap; }
.cac-dim { opacity: .55; }

/* ── DaC (Data as Code) ── */
.dac-overview-grid, .dac-quality-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dac-stat-card { background: var(--surface2); border-radius: 10px; padding: 12px; }
.dac-stat-num { font-size: 20px; font-weight: 800; color: var(--text); }
.dac-stat-label { font-size: 11px; color: var(--text3); }
.dac-resource-list { display: flex; flex-direction: column; gap: 6px; }
.dac-resource-item, .dac-pipeline-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.dac-res-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); }
.dac-res-type { font-size: 11px; color: var(--text3); font-family: 'SF Mono', Consolas, monospace; }
.dac-res-actions { display: flex; gap: 4px; }
.dac-pipeline-count { font-size: 10px; background: var(--purple-light); color: var(--purple); border-radius: 10px; padding: 2px 8px; font-weight: 700; }
.dac-gen-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.dac-gen-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text2); cursor: pointer; }
.dac-gen-btn:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
.dac-code-output { background: #0F172A; color: #A5F3FC; border-radius: 10px; padding: 12px; font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; overflow: auto; max-height: 320px; white-space: pre; }
.dac-lineage { margin-top: 10px; }
.dac-lineage-header { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 8px; }
.dac-lineage-diagram { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding: 8px 0; }
.dac-lineage-layer { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.dac-layer-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text3); letter-spacing: .4px; }
.dac-layer-nodes { display: flex; flex-direction: column; gap: 6px; }
.dac-lineage-node { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); }
.dac-ln-name { font-size: 11.5px; font-weight: 600; color: var(--text); }
.dac-ln-type { font-size: 10px; color: var(--text3); }
.dac-lineage-arrow { align-self: center; color: var(--text3); font-size: 16px; flex-shrink: 0; }
.dac-quality-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dac-qc-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface2); font-size: 12px; font-weight: 600; }
.dac-qc-body { padding: 10px 12px; }
.dac-qc-field { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text2); padding: 3px 0; }

/* ── PaC (Policy as Code) ── */
.pac-fw-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text2); }
.pac-fw-item:hover { background: var(--surface); }
.pac-fw-item.active { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; color: var(--text); }
.pac-fw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pac-fw-label { flex: 1; }
.pac-fw-badge { font-size: 9.5px; background: var(--purple-light); color: var(--purple); border-radius: 8px; padding: 1px 6px; font-weight: 700; }
.pac-tmpl-item { padding: 8px 10px; border-radius: 8px; font-size: 12px; color: var(--text2); cursor: pointer; }
.pac-tmpl-item:hover { background: var(--surface); }
.pac-scan-summary, .pac-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pac-score-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface2); border-radius: 12px; padding: 14px; }
.pac-score-num { font-size: 26px; font-weight: 800; }
.pac-score-label { font-size: 10.5px; color: var(--text3); }
.pac-score-breakdown { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text2); }
.pac-summary-note { font-size: 11px; color: var(--text3); grid-column: 1 / -1; }
.pac-scan-results { display: flex; flex-direction: column; gap: 8px; }
.pac-sev-group { margin-bottom: 8px; }
.pac-finding { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.pac-finding-header { display: flex; align-items: center; gap: 8px; }
.pac-finding-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); }
.pac-finding-count { font-size: 10px; background: var(--surface2); border-radius: 8px; padding: 1px 7px; color: var(--text3); }
.pac-finding-resource { font-size: 11px; color: var(--text3); font-family: 'SF Mono', Consolas, monospace; margin-top: 3px; }
.pac-finding-actions { display: flex; gap: 6px; margin-top: 8px; }
.pac-fix-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); font-size: 11px; color: var(--text2); cursor: pointer; }
.pac-fix-btn:hover { border-color: var(--purple); color: var(--purple); }
.pac-rule-id { font-size: 10px; color: var(--text3); font-family: 'SF Mono', Consolas, monospace; }
.pac-pass-banner { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #ECFDF5; color: #065F46; border-radius: 10px; font-size: 13px; font-weight: 600; }
.pac-export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pac-export-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; transition: all .15s; }
.pac-export-card:hover { border-color: var(--purple); background: var(--purple-light); }
.pac-export-icon { font-size: 22px; margin-bottom: 6px; }
.pac-export-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.pac-export-desc { font-size: 11px; color: var(--text3); margin-top: 3px; line-height: 1.45; }

/* ── PiC (Pipeline as Code) ── */
.pic-platform-icon { font-size: 18px; }
.pic-filename { font-family: 'SF Mono', Consolas, monospace; font-size: 11px; color: var(--text3); }
.pic-options { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pic-opt-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); }
.pic-opt-label input { accent-color: var(--purple); }
.pic-output { background: #0F172A; color: #A5F3FC; border-radius: 10px; padding: 12px; font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; overflow: auto; max-height: 340px; white-space: pre; }
.pic-cloud-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.pic-cloud-badge { font-size: 10.5px; padding: 3px 9px; border-radius: 10px; background: var(--surface2); color: var(--text2); font-weight: 600; }

/* ── Cost panel ── */
.cost-total { display: flex; flex-direction: column; align-items: center; padding: 16px; background: linear-gradient(135deg, var(--purple-light), #EDE9FE); border-radius: 12px; margin-bottom: 14px; }
.cost-total-main { display: flex; align-items: baseline; gap: 4px; }
.cost-total-num { font-size: 30px; font-weight: 800; color: var(--purple); }
.cost-period { font-size: 12px; color: var(--text3); }
.cost-total-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
.cost-cloud-breakdown { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cost-cloud-chip { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 16px; font-size: 11.5px; }
.cost-cloud-name { color: var(--text2); font-weight: 600; }
.cost-cloud-amt { color: var(--text); font-weight: 700; }
.cost-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; }
.cost-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.cost-item-info { flex: 1; min-width: 0; }
.cost-item-name { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-item-type { font-size: 10.5px; color: var(--text3); font-family: 'SF Mono', Consolas, monospace; }
.cost-amount { font-size: 13px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.cost-bar-wrap { height: 4px; background: var(--surface2); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.cost-bar { height: 100%; background: var(--purple); border-radius: 2px; }
.cost-free-section { margin-top: 14px; }
.cost-free-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text3); letter-spacing: .4px; margin-bottom: 8px; }
.cost-free-list { display: flex; gap: 6px; flex-wrap: wrap; }
.cost-free-tag { font-size: 10.5px; padding: 3px 9px; border-radius: 10px; background: #ECFDF5; color: #065F46; }

/* ── Security findings / severity ── */
.finding-header { display: flex; align-items: center; gap: 8px; }
.finding-rule { font-size: 12.5px; font-weight: 600; color: var(--text); flex: 1; }
.finding-msg { font-size: 12px; color: var(--text2); margin-top: 4px; line-height: 1.5; }
.finding-resource { font-size: 11px; color: var(--text3); font-family: 'SF Mono', Consolas, monospace; margin-top: 3px; }
.sev-pill { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 9px; flex-shrink: 0; }
.sev-pill.critical, .pac-finding.critical .sev-pill { background: #FEE2E2; color: #991B1B; }
.sev-pill.high     { background: #FFEDD5; color: #9A3412; }
.sev-pill.medium, .sev-pill.med { background: #FEF3C7; color: #92400E; }
.sev-pill.low      { background: #DBEAFE; color: #1E40AF; }
.sev-pill.passed   { background: #ECFDF5; color: #065F46; }
.scan-clean { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; color: #065F46; text-align: center; }
.scan-clean i { font-size: 34px; }
.scan-score-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.scan-score-item { flex: 1; min-width: 90px; background: var(--surface2); border-radius: 10px; padding: 10px 12px; text-align: center; font-size: 12px; color: var(--text2); }

/* ── AI suggestions ── */
.ai-sug-header { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.ai-sug-detail { font-size: 12px; color: var(--text2); margin-top: 5px; line-height: 1.55; }
.ai-action-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-size: 11.5px; color: var(--purple); cursor: pointer; }
.ai-action-btn:hover { background: var(--purple-light); border-color: var(--purple); }
.ai-thinking-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text3); }

/* ── Canvas node bits + misc ── */
.node-rect { transition: filter .12s; }
.port { fill: var(--surface); stroke: var(--purple); stroke-width: 1.5; cursor: crosshair; }
.port-in:hover, .port-out:hover { fill: var(--purple-light); }
.tags-container { display: flex; gap: 4px; flex-wrap: wrap; }
.ctx-divider { height: 1px; background: var(--border); margin: 4px 0; }
.ia-result-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 3px 9px; border-radius: 10px; background: var(--purple-light); color: var(--purple); margin: 2px; }
.modal-action-secondary { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text2); cursor: pointer; }
.modal-action-secondary:hover { background: var(--surface2); }
.sac-list { display: flex; flex-direction: column; }
.sac-fields { display: flex; flex-direction: column; }

/* ── As-code modals on mobile: stack vertically ── */
@media (max-width: 900px) {
  .cac-body, .dac-body, .pac-body, .pic-body { flex-direction: column; }
  .cac-sidebar, .dac-sidebar, .pac-sidebar, .pic-sidebar { width: 100%; max-height: 140px; border-right: none; border-bottom: 1px solid var(--border); }
  .cac-modal, .dac-modal, .pac-modal, .pic-modal { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* final coverage */
.dac-quality-view { display: flex; flex-direction: column; gap: 10px; }
.pac-editor { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pac-editor textarea { width: 100%; min-height: 220px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; resize: vertical; color: var(--text); }
.pac-section { margin-bottom: 16px; }

/* ── AI Assistant FAB (base style was lost — this is why the chatbot "disappeared") ── */
.ai-fab { position: fixed; bottom: 48px; right: 20px; width: 52px; height: 52px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--purple), #6D28D9); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 8px 24px rgba(124,58,237,.45); z-index: 810; display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; }
.ai-fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(124,58,237,.55); }
.ai-fab:active { transform: scale(.96); }

/* AI suggestion cards */
.ai-suggestion { border: 1px solid var(--border); border-left: 3px solid var(--border2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.ai-suggestion.sev-high { border-left-color: #DC2626; }
.ai-suggestion.sev-medium { border-left-color: #D97706; }
.ai-suggestion.sev-low { border-left-color: #2563EB; }

/* ── AI panel: minimize + guaranteed scrolling ── */
.ai-panel { height: min(560px, 70vh); }                     /* fixed height → body region is deterministic */
.ai-panel-header { flex-shrink: 0; cursor: default; }
.ai-panel-header button:hover { background: var(--surface2); }
.ai-panel-body { min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.ai-panel-footer { flex-shrink: 0; }
.ai-panel.ai-min { height: auto; max-height: none; }
.ai-panel.ai-min .ai-panel-body, .ai-panel.ai-min .ai-panel-footer { display: none; }
.ai-msg { font-size: 12.5px; color: var(--text2); line-height: 1.6; padding: 8px 0; }
.ai-msg.ai-empty { text-align: center; color: var(--text3); padding: 24px 8px; }
.ai-msg.ai-empty i { font-size: 26px; opacity: .5; }
.ai-live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--purple); background: var(--purple-light); border-radius: 10px; padding: 2px 8px; font-weight: 600; }
.ai-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: aiPulse 1.4s infinite; }
@media (max-width: 640px) {
  .ai-panel { left: 8px; right: 8px !important; width: auto; bottom: 8px; height: min(70dvh, 520px); }
  .ai-panel.ai-min { height: auto; }
}

/* ── Mobile header: icon buttons in sync ── */
@media (max-width: 640px) {
  .header-left, .header-right { gap: 8px; }
  .mobile-drawer-toggle { width: 36px; height: 36px; border-radius: 8px; }
  .mobile-drawer-toggle i { font-size: 18px; }
  /* Generate stays the single accent; toggles are uniform quiet ghosts beside it */
  .btn-generate { height: 36px; display: inline-flex; align-items: center; }
  .logo svg { width: 26px; height: 26px; }
  .logo-text { font-size: 15px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.5 — Security Scan & Cost Estimate: wide sidebar+main layout matching
   Configuration as Code, instead of the old small single-column popup.
   ══════════════════════════════════════════════════════════════════════════ */
.modal.sec-modal, .modal.cost-modal-xl { width: min(1120px, 96vw); height: min(740px, 92vh); background: var(--surface); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.sec-body, .cost-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.sec-sidebar, .cost-sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface2); overflow-y: auto; padding: 14px; }
.sec-main, .cost-main { flex: 1; overflow-y: auto; padding: 16px; min-width: 0; }
/* Stat rows read naturally as a vertical stack inside a narrow sidebar */
.sec-sidebar .scan-score-row, .cost-sidebar .cost-cloud-breakdown { flex-direction: column; margin-bottom: 0; }
.sec-sidebar .scan-score-item { text-align: left; }
.cost-sidebar .cost-note { margin: 0 0 12px; }
.cost-sidebar #costSummary .cost-total { margin-bottom: 0; }
@media (max-width: 900px) {
  .sec-body, .cost-body { flex-direction: column; }
  .sec-sidebar, .cost-sidebar { width: 100%; max-height: 170px; border-right: none; border-bottom: 1px solid var(--border); }
  .sec-sidebar .scan-score-row, .cost-sidebar .cost-cloud-breakdown { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .modal.sec-modal, .modal.cost-modal-xl { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.6 — Deployment validation (badge in Code tab footer + report modal,
   which reuses the Security Scan sidebar+main layout classes).
   ══════════════════════════════════════════════════════════════════════════ */
.deploy-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer; margin-left: auto; white-space: nowrap; border: 1px solid transparent; }
.deploy-badge i { font-size: 13px; }
.deploy-badge.ok { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.deploy-badge.warn { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.deploy-badge.bad { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.deploy-badge:hover { filter: brightness(0.97); }

.val-verdict { display: flex; align-items: center; gap: 7px; margin: 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.val-verdict i { font-size: 17px; }
.val-verdict small { font-weight: 500; opacity: .8; }
.val-verdict.ok { background: #ECFDF5; color: #047857; }
.val-verdict.bad { background: #FEF2F2; color: #B91C1C; }
.val-files { display: flex; flex-direction: column; gap: 4px; }
.val-file { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text2); font-family: 'SF Mono', Consolas, monospace; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
.val-chip { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.val-chip.ok { background: #ECFDF5; color: #047857; }
.val-chip.warn { background: #FFFBEB; color: #B45309; }
.val-chip.bad { background: #FEF2F2; color: #B91C1C; }
.finding-fix { font-size: 11.5px; color: var(--text3); padding: 6px 10px 8px 10px; line-height: 1.5; }
/* ══════════════════════════════════════════════════════════════════════════
   v2.7 — Standalone feature pages, full-bleed layout.
   The page is the feature: fixed header, fixed footer, and the feature panel
   filling the entire area between them edge-to-edge — no centered card, no
   side gaps, no "window inside a window".

   Only the overlay explicitly marked .standalone-primary is flattened into
   the page. Every other .modal-overlay on these pages (import dialogs,
   confirmations…) keeps its normal popup behavior.
   ══════════════════════════════════════════════════════════════════════════ */

body.standalone-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }

.standalone-app-header { flex-shrink: 0; height: var(--header-h); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.standalone-app-header .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.standalone-app-header .logo-text { font-size: 16px; font-weight: 800; color: var(--text); }
.standalone-app-header .sah-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text3); min-width: 0; }
.standalone-app-header .sah-crumb .sah-sep { color: var(--border2); }
.standalone-app-header .sah-crumb .sah-current { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); white-space: nowrap; }
.standalone-app-header .sah-crumb .sah-current i { color: var(--purple); font-size: 16px; }
.standalone-app-header .sah-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.standalone-app-header .sah-hint { font-size: 11.5px; color: var(--text3); white-space: nowrap; display: none; }
.standalone-app-header .sah-hint a { color: var(--purple); font-weight: 600; text-decoration: none; }
.standalone-app-header .sah-hint a:hover { text-decoration: underline; }
@media (min-width: 1100px) { .standalone-app-header .sah-hint { display: inline; } }

/* Middle region: edge-to-edge, no padding, no max-width — the feature panel
   is the page body, exactly like .app-body in the designer. */
.standalone-main { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
.standalone-main-inner { height: 100%; }

/* The ONE overlay hosting this page's feature, flattened into the page */
body.standalone-page .modal-overlay.standalone-primary {
  position: static !important; inset: auto !important;
  display: block !important; height: 100% !important;
  background: none !important; padding: 0 !important; z-index: auto !important;
}
body.standalone-page .modal-overlay.standalone-primary > div {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  height: 100% !important; max-height: none !important; min-height: 0 !important;
  margin: 0 !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important;
}

/* Footer: pinned, same visual language as the designer's status bar */
.standalone-app-footer { flex-shrink: 0; height: var(--footer-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; background: var(--surface); border-top: 1px solid var(--border); font-size: 11px; color: var(--text3); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.standalone-app-footer::-webkit-scrollbar { display: none; }

@media (max-width: 900px) {
  .standalone-app-header { padding: 0 12px; gap: 10px; }
  .standalone-app-header .sah-crumb .sah-current span { display: none; }
}
@media (max-width: 640px) {
  .standalone-app-header .logo-text { display: none; }
  .standalone-app-footer { gap: 10px; padding: 0 10px; }
  .standalone-footer-right .footer-link:not(:last-child) { display: none; }
}

/* Belt-and-suspenders: the feature modules (cac/pac/pic/dac/sac) inject their
   own <style> blocks at runtime, which sit after this stylesheet in the DOM.
   These explicit, higher-specificity rules guarantee the full-bleed layout
   wins on the standalone pages regardless of injection order. */
body.standalone-page .standalone-primary .cac-modal,
body.standalone-page .standalone-primary .pac-modal,
body.standalone-page .standalone-primary .pic-modal,
body.standalone-page .standalone-primary .dac-modal,
body.standalone-page .standalone-primary .sac-modal,
body.standalone-page .standalone-primary .sec-modal,
body.standalone-page .standalone-primary .cost-modal-xl {
  width: 100% !important; max-width: none !important;
  height: 100% !important; max-height: none !important;
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important;
}

/* ══ v2.8 — "About this resource" (purpose & usage) in the properties panel ══ */
.props-about { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.props-about-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--purple); margin-bottom: 6px; }
.props-about-head i { font-size: 14px; }
.props-about-text { font-size: 12px; line-height: 1.55; color: var(--text2); }
.props-about-tf { display: inline-block; margin-top: 8px; font-size: 10.5px; font-family: 'SF Mono', Consolas, monospace; color: var(--text3); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }

/* ══════════════════════════════════════════════════════════════════════════
   v2.9 — Security Scan & Cost Estimate: visible card borders and properly
   styled stat numbers (sidebar severity counters, per-cloud cost chips,
   finding rows). Fixes "0HIGH"-style jammed text and invisible borders.
   ══════════════════════════════════════════════════════════════════════════ */

/* Severity counters: number styled apart from its label, card per stat */
.scan-score-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 10px 12px; text-align: left; }
.scan-score-item span { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.scan-score-item label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.scan-score-item.high { border-left-color: #DC2626; } .scan-score-item.high span { color: #DC2626; }
.scan-score-item.med  { border-left-color: #D97706; } .scan-score-item.med span  { color: #D97706; }
.scan-score-item.low  { border-left-color: #2563EB; } .scan-score-item.low span  { color: #2563EB; }
.scan-score-item.ok   { border-left-color: #059669; } .scan-score-item.ok span   { color: #059669; }
.sec-sidebar .scan-score-row { gap: 8px; }

/* Finding rows: real cards with severity accent (was completely unstyled) */
.scan-finding { background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.scan-finding:last-child { margin-bottom: 0; }
.scan-finding.sev-high     { border-left-color: #DC2626; }
.scan-finding.sev-medium,
.scan-finding.sev-med      { border-left-color: #D97706; }
.scan-finding.sev-low      { border-left-color: #2563EB; }
.scan-finding .finding-detail { font-size: 12px; color: var(--text2); margin-top: 5px; line-height: 1.5; }
/* pill colors driven by the finding's severity (markup has a plain .sev-pill) */
.scan-finding.sev-high .sev-pill     { background: #FEE2E2; color: #991B1B; }
.scan-finding.sev-medium .sev-pill,
.scan-finding.sev-med .sev-pill      { background: #FEF3C7; color: #92400E; }
.scan-finding.sev-low .sev-pill      { background: #DBEAFE; color: #1E40AF; }

/* Per-cloud cost chips: full card with clear number/label separation
   (the colored left edge on a 16px-radius pill looked like a stray "(" ) */
.cost-cloud-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 9px 12px; font-size: 11.5px; }
.cost-cloud-name { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--text2); }
.cost-cloud-amt { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; font-family: 'SF Mono', Consolas, monospace; }
.cost-sidebar .cost-cloud-breakdown { gap: 8px; margin-top: 10px; }
.cost-sidebar .cost-total { align-items: stretch; text-align: center; border: 1px solid var(--border); }

/* Cost line items: keep cards separated in the main pane */
#costList .cost-item { background: var(--surface); margin-bottom: 8px; }
#costList .cost-free-section { margin-top: 12px; }