:root {
  --bg: #ffffff;
  --panel: #f7f8fa;
  --text: #231F20; /* Primary text black (R35 G31 B32) */
  --muted: #6b7280;
  --brand-red: #E01E26; /* Pantone 485 C (R224 G30 B38) */
  --brand-white: #ffffff;
  --brand-blue: #2B328C; /* Pantone 072 C (R43 G50 B140) - minimal use */
  --border: #A4AAAD; /* Pantone 429 C (R164 G170 B173) */
  --sidebar-w: 420px; /* adjustable via resizer */
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: Futura, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 500; font-size: 1.25em; }
h1, h2, h3, .modal-title, .brand-tagline, .gen-panel > summary { color: var(--brand-red); font-weight: 700; }
.layout { display: grid; grid-template-columns: var(--sidebar-w) 6px 1fr; height: 100vh; }
.sidebar { border-right: 1px solid var(--border); background: #fff;
  display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow: hidden; position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; }

/* Vertical resizer between sidebar and stage */
.resizer { cursor: col-resize; background: transparent; position: relative; }
.resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: var(--border); opacity: 0.8; }
.resizer:hover::after { background: var(--brand-red); opacity: 0.8; }



.brand-divider { opacity: 0.7; font-size: 18px; color: var(--brand-red); }
.header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; min-height: 72px; }
.header-left { display: flex; align-items: center; }
.header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header .logo { display: block; height: 64px; width: auto; }
.header .header-portal { height: 64px; }



.upload { display: flex; gap: 10px; align-items: center; position: relative; }
.upload .hint { font-size: 12px; color: var(--muted); }
.upload input[type="file"] { display: none; }
.file-btn { background: #f3f4f6; color: var(--brand-red); border: 1px solid var(--brand-red); border-radius: 10px; padding: 0.7em 0.9em; cursor: pointer; box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: box-shadow .15s ease, transform .05s ease, background .15s ease, color .15s ease; }
.file-btn:hover { box-shadow: 0 6px 18px rgba(215,25,32,0.18); background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.file-btn:active { transform: translateY(1px); }
.dropzone { border: 1px dashed rgba(215,25,32,0.5); border-radius: 10px; padding: 10px; background: var(--panel); }
.dropzone.dragover { background: rgba(215,25,32,0.08); }
.chat { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
/* chat log border grey */
.chat-log { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; overflow: auto; }
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 8px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-sticky { position: sticky; bottom: 0; background: #fff; padding-top: 10px; display: grid; gap: 10px; }
.header-new-chat { margin-left: 12px; padding: 6px 12px; }
.gen-panel { margin-top: 0; }
.chat-input { display: flex; gap: 8px; }
.chat-input input { margin: 0; }
.msg { margin-bottom: 0.7em; font-size: 0.9em; line-height: 1.45; display: grid; grid-template-columns: 4em 1fr; gap: 0.3em; }
.msg .role { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding-top: 4px; }
.msg .text { white-space: pre-wrap; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.msg.role-you .text { border-color: rgba(215,25,32,0.35); background: #fff8f8; }
.msg.role-model .text { border-color: rgba(0,0,0,0.08); background: #f9fafb; }
.msg.role-system .text { border-color: rgba(0,0,0,0.08); background: #f9fafb; }
.msg.role-analyzer .text { border-color: rgba(215,25,32,0.25); background: #fff8f8; }
.msg.role-model { grid-template-columns: 4em 1fr; }
.msg.role-model .role { order: 1; text-align: left; }
.msg.role-model .text { order: 2; justify-self: start; }
.msg.role-you { grid-template-columns: 1fr 4em; }
.msg.role-you .role { order: 2; text-align: right; }
.msg.role-you .text { order: 1; justify-self: end; }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); }
.chat-input button, #uploadBtn, #analyzeBtn, .file-btn { background: #f3f4f6; border: 1px solid var(--brand-red); color: var(--brand-red); border-radius: 10px; padding: 0.7em 0.9em; cursor: pointer; box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: box-shadow .15s ease, transform .05s ease, background .15s ease, color .15s ease; }
.chat-input button:hover, #uploadBtn:hover, #analyzeBtn:hover, .file-btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); background: var(--brand-red); color: #fff; }
.chat-input button:active, #uploadBtn:active, #analyzeBtn:active { transform: translateY(1px); }
.chat-input button:disabled, #uploadBtn:disabled, #analyzeBtn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.gen-panel { border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; background: #fff; }
.gen-panel > summary { cursor: pointer; font-size: 12px; color: var(--text); opacity: 1; }
.gen-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 8px; }
.gen-controls input { width: 100%; padding: 6px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); }

.stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px; gap: 12px; }
.canvas-wrap { position: relative; width: min(100%, 1200px); aspect-ratio: 2 / 1;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.main-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.main-image { transform-origin: 0 0; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,0.6); z-index: 10001; }
.loading-overlay .load-text { font-size: 14px; color: var(--text); }
.loading-overlay.hidden { display: none; }
.hover-hud { position: absolute; display: flex; gap: 8px; z-index: 2; pointer-events: auto; }
.reset-view { position: absolute; top: 8px; right: 8px; z-index: 10001; background: var(--brand-red); color: #fff; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.reset-view.hidden { display: none; }
.hidden { display: none !important; }

/* polygon hover style is set via canvas draw */

/* Empty state */
.empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--muted); z-index: 0; pointer-events: none; background: #fff; }
.empty-state.hidden { display: none !important; }
.empty-state .illustration { width: 72px; height: 72px; color: rgba(215,25,32,0.8); filter: drop-shadow(0 2px 12px rgba(215,25,32,0.18)); }
.empty-state .headline { font-size: 18px; color: #111; font-weight: 600; }
.empty-state .sub { font-size: 13px; color: #444; margin-bottom: 4px; }
.empty-state .file-btn { pointer-events: auto; }
.canvas-wrap.dragover .empty-state { color: var(--brand-white); }
.canvas-wrap.dragover .empty-state .illustration { color: var(--brand-red); }

/* Spinner */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.15); border-top-color: var(--brand-red); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -2px; margin-right: 6px; }
.spinner.big { width: 24px; height: 24px; border-width: 3px; margin-right: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .stage { padding: 12px; }
  .canvas-wrap { aspect-ratio: 1 / 1; }
}

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 10002; }
.modal.hidden { display: none; }
.modal-content { width: min(96vw, 1400px); background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.12); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #fafafa; border-bottom: 1px solid var(--border); }
.modal-title { font-weight: 600; }
.modal-close { background: transparent; border: none; color: var(--text); font-size: 20px; cursor: pointer; }
.modal-body { padding: 12px; display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; background: #fff; max-height: calc(100vh - 140px); overflow: auto; }
.modal-row { font-size: 0.9em; color: var(--text); }
.modal-footer { padding: 10px 12px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); background: #fff; }

/* Results panel styling */
#mvResults { max-height: 70vh; overflow: auto; font-size: 0.9em; }
.results-header { font-weight: 700; color: var(--brand-red); margin-bottom: 8px; }
.results-summary { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: #fff; margin-bottom: 10px; }
.results-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.results-tab { padding: 6px 10px; cursor: pointer; color: var(--text); border-bottom: 2px solid transparent; font-weight: 600; }
.results-tab.active { color: var(--brand-red); border-bottom-color: var(--brand-red); }
.results-section { padding: 6px 0; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px; font-size: 13px; }
.color-patch { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.damage-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: #fff; margin-bottom: 10px; }
.damage-card h4 { margin: 0 0 6px 0; font-size: 14px; color: var(--text); font-weight: 700; }
.pill { display: inline-block; padding: 2px 6px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border); margin-left: 6px; }
.kv-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.kv-chip .k { color: var(--muted); font-weight: 600; }
.kv-chip .v { color: var(--text); }
.damage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.pill.severity-minor, .pill.severity-low { background: #e5f3ff; color: #1e40af; border-color: #93c5fd; }
.pill.severity-moderate, .pill.severity-medium { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.pill.severity-severe, .pill.severity-high { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pill.severity-critical { background: #dc2626; color: #fff; border: none; font-weight: 600; }
.pill.decision-repair { background: #f4f4f5; color: #222; }
.pill.decision-replace { background: var(--brand-red); color: #fff; border: none; }

/* Category-specific panel styling */
#categoryPanel { transition: border-color 0.3s ease; }
#categoryPanel.public-safety { border-left: 4px solid #dc2626; background: linear-gradient(to right, rgba(220, 38, 38, 0.03), transparent 200px); }
#categoryPanel.property { border-left: 4px solid #ea580c; background: linear-gradient(to right, rgba(234, 88, 12, 0.03), transparent 200px); }
#categoryPanel.public-safety .results-header { color: #dc2626; border-bottom: 2px solid rgba(220, 38, 38, 0.2); padding-bottom: 8px; margin-bottom: 12px; }
#categoryPanel.property .results-header { color: #ea580c; border-bottom: 2px solid rgba(234, 88, 12, 0.2); padding-bottom: 8px; margin-bottom: 12px; }

/* Issue type badges */
.issue-type-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 6px; }
.issue-type-badge.ppe { background: #fef3c7; color: #92400e; }
.issue-type-badge.fall-hazard { background: #fee2e2; color: #991b1b; }
.issue-type-badge.egress { background: #dc2626; color: #fff; }
.issue-type-badge.structural { background: #7c3aed; color: #fff; }
.issue-type-badge.water { background: #0ea5e9; color: #fff; }
.issue-type-badge.fire { background: #ef4444; color: #fff; }
.issue-type-badge.mold { background: #10b981; color: #fff; }
.issue-type-badge.electrical { background: #f59e0b; color: #fff; }
.issue-type-badge.default { background: #6b7280; color: #fff; }
.pill.decision-investigate { background: #fff; color: var(--brand-red); border-color: var(--brand-red); }

.kv > div:nth-child(odd) { color: var(--muted); font-weight: 600; }
.kv > div:nth-child(even) { color: var(--text); }
.pill.severity-minor, .pill.severity-low { background: #e5f3ff; color: #1e40af; border-color: #93c5fd; }
.pill.severity-moderate, .pill.severity-medium { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.pill.severity-severe, .pill.severity-high { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pill.severity-critical { background: #dc2626; color: #fff; border: none; font-weight: 600; }
.pill.decision-repair { background: #f4f4f5; color: #222; }
.pill.decision-replace { background: #E01E26; color: #fff; border: none; }
.pill.decision-investigate { background: #fff; color: var(--brand-red); border-color: var(--brand-red); }

/* POI Priority color coding */
.pill.priority-low { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.pill.priority-medium { background: #fff8e1; color: #f57f17; border-color: #ffd54f; }
.pill.priority-medium-high { background: #fff3e0; color: #e65100; border-color: #ffb74d; }
.pill.priority-high { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.pill.priority-critical { background: var(--brand-red); color: #fff; border: none; font-weight: 600; }
.pill.priority-urgent { background: #b71c1c; color: #fff; border: none; font-weight: 600; }