* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	background: #0f1115; color: #e8e8e8;
	display: flex; flex-direction: column;
}
header {
	padding: 12px 20px; border-bottom: 1px solid #1f2330;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-logo { width: 35px; height: 35px; }
.header-right { display: flex; align-items: center; gap: 10px; }
header h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.header-brand-wrap { display: flex; flex-direction: column; line-height: 1; }
.brand-prefix { color: #7ea6ff; }
.brand-suffix { color: #fff; }
.version-badge { font-size: 8px; color: #6f7891; letter-spacing: 0.05em; margin-top: 1px; }
header small { color: #8a92a3; }
.active-org {
	font-size: 12px;
	font-weight: 600;
	color: #7ea6ff;
	background: #1a2540;
	border: 1px solid #2a4a87;
	padding: 4px 10px;
	border-radius: 12px;
	text-transform: none;
	letter-spacing: 0.01em;
}
.active-org:empty { display: none; }
.user-name {
	font-size: 13px; color: #cbd3e3; display: flex; align-items: center; gap: 6px;
}
.user-role-tag {
	font-size: 9px; font-weight: 700; color: #fff; padding: 2px 7px; border-radius: 2px;
	text-transform: uppercase; letter-spacing: 0.04em;
}

/* --- Company welcome card (injected after selection) --- */
.msg.assistant.company-welcome .body {
	background: #12161f;
	border: 1px solid #2a334d;
	border-left: 3px solid #7ea6ff;
	border-radius: 8px;
	padding: 12px 16px;
	margin-top: 2px;
}
.msg.assistant.company-welcome h2 {
	margin-top: 2px;
}

/* --- Company selector modal --- */
/* The [hidden] attribute's user-agent default is `display: none`, but a more
   specific .modal rule below would override it. Force it to stay hidden. */
.modal[hidden] { display: none; }
.modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 21, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	padding: 20px;
}
.modal-card {
	background: #12161f;
	border: 1px solid #2a334d;
	border-radius: 12px;
	padding: 28px 28px 24px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.modal-card h2 {
	margin: 0 0 6px;
	color: #fff;
	font-size: 20px;
}
.modal-card .modal-sub {
	margin: 0 0 20px;
	color: #8a92a3;
	font-size: 13px;
	line-height: 1.5;
}
.modal-card .modal-sub code {
	background: #1a1f2a;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 12px;
	color: #7ea6ff;
}
.company-list { display: flex; flex-direction: column; gap: 8px; }
.company-btn {
	display: block;
	width: 100%;
	text-align: left;
	padding: 12px 16px;
	background: #161a24;
	border: 1px solid #2a334d;
	border-radius: 10px;
	color: #e8e8e8;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.company-btn:hover {
	background: #1a2540;
	border-color: #4a5a87;
}
.company-btn .company-desc {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	color: #6f7891;
}
.modal-card .error {
	background: #2a1418;
	border: 1px solid #5a2028;
	color: #f2b4c0;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
	margin-top: 12px;
}
.logout-btn {
	padding: 6px 12px; border-radius: 6px; border: 1px solid #2a334d;
	background: transparent; color: #cbd3e3; font-size: 12px; cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}
.logout-btn:hover { background: #2a334d; color: #fff; }
/* Upload button */
.upload-btn {
	padding: 4px 10px; border-radius: 6px; border: 1px solid #2a334d;
	background: transparent; color: #cbd3e3; font-size: 16px; cursor: pointer;
	line-height: 1;
}
.upload-btn:hover { background: #2a334d; color: #fff; }

/* Drag & drop overlay */
.drop-overlay {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(10, 12, 16, 0.90);
	display: flex; align-items: center; justify-content: center;
	cursor: default;
}
.drop-overlay[hidden] { display: none; }
.drop-overlay-content {
	text-align: center;
	border: 3px dashed #4a5a87;
	border-radius: 20px;
	padding: 60px 80px;
}
.drop-overlay.denied .drop-overlay-content { border-color: #dc2626; }
.drop-overlay.allowed .drop-overlay-content { border-color: #22c55e; }
.drop-indicator { margin-bottom: 16px; }
.drop-overlay-text {
	font-size: 20px; color: #cbd3e3; font-weight: 600;
}
.drop-overlay.denied .drop-overlay-text { color: #ef4444; }
.drop-overlay.allowed .drop-overlay-text { color: #22c55e; }
/* SPI wizard progress */
.spi-progress-bar-wrap {
	height: 6px; background: #1f2330; border-radius: 3px; overflow: hidden; margin-top: 8px;
}
.spi-progress-bar {
	height: 100%; background: #06b6d4; border-radius: 3px; transition: width 0.3s;
}
.spi-results-list {
	max-height: 340px; overflow-y: auto; margin-top: 8px;
}
.spi-result-item {
	display: flex; align-items: center; gap: 6px; padding: 5px 0;
	border-bottom: 1px solid #1a1e28; font-size: 12px; color: #cbd3e3;
}
.spi-result-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spi-result-tags { flex-shrink: 0; }
.spi-result-status { font-size: 11px; }
.spi-result-status.ok { color: #22c55e; }
.spi-result-status.err { color: #ef4444; }
/* Promote wizard member rows */
.pw-members { max-height: 350px; overflow-y: auto; }
.pw-member {
	display: flex; align-items: center; gap: 6px;
	padding: 5px 0; border-bottom: 1px solid #1a1e28;
}
.pw-member-name { font-size: 12px; color: #cbd3e3; font-weight: 500; min-width: 120px; max-width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-member-belbin { flex-shrink: 0; display: flex; gap: 2px; }
.pw-member input {
	flex: 1; background: #0c0e12; border: 1px solid #2a334d; border-radius: 4px;
	padding: 4px 8px; font-size: 11px; color: #e8e8e8;
}
.pw-member input:focus { border-color: #4a5a87; outline: none; }
/* Manager tag in /tree */
.tree-manager-tag {
	font-size: 9px; font-weight: 700; color: #f59e0b; background: #3b2a0a;
	border: 1px solid #f59e0b; padding: 1px 5px; border-radius: 3px;
	margin-left: 4px; vertical-align: middle;
}
/* Debug console */
.console-panel {
	position: absolute; bottom: 52px; right: 8px; z-index: 50;
	width: 320px; height: 180px; min-width: 200px; min-height: 80px;
	background: rgba(10, 12, 16, 0.92); border: 1px solid #1f2330;
	border-radius: 8px; overflow: hidden;
	backdrop-filter: blur(8px);
	resize: both; overflow: auto;
	display: flex; flex-direction: column;
}
.console-panel[hidden] { display: none; }
.console-header {
	display: flex; align-items: center; gap: 6px;
	padding: 5px 8px; background: #12161f; border-bottom: 1px solid #1f2330;
	cursor: move;
}
.console-led {
	width: 10px; height: 10px; border-radius: 50%; cursor: pointer;
	display: inline-block;
}
.console-led.red { background: #ff5f57; }
.console-led.red:hover { background: #ff3b30; }
.console-led.green { background: #28c840; }
.console-led.green:hover { background: #22c55e; }
.console-title {
	font-size: 10px; color: #6f7891; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.05em; flex: 1;
}
.console-output {
	padding: 4px 8px; overflow-y: auto; flex: 1;
	font-family: "SF Mono", "Fira Code", monospace;
	font-size: 9px; line-height: 1.5; color: #6f7891;
}
.console-output .c-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-output .c-tool { color: #7ea6ff; }
.console-output .c-result { color: #6f7891; }
.console-output .c-thinking { color: #f59e0b; font-style: italic; }
.console-output .c-error { color: #ef4444; }
.console-output .c-time { color: #4a5a6a; margin-right: 4px; }
/* Console zoom modal */
.console-modal-card {
	width: 80vw; height: 80vh; background: #0a0c10;
	border: 1px solid #2a334d; border-radius: 10px; overflow: hidden;
	display: flex; flex-direction: column;
}
.console-modal-card .console-output {
	flex: 1; max-height: none; padding: 8px 12px;
	font-size: 11px;
}
/* Bug report wizard */
.bug-screenshot-preview {
	max-height: 200px; overflow: hidden; border-radius: 6px;
	border: 1px solid #2a334d; margin-bottom: 8px; background: #0c0e12;
}
.bug-screenshot-preview img { width: 100%; display: block; }
.bug-context { font-size: 11px; margin-bottom: 8px; }
.bug-context-row { display: flex; gap: 8px; padding: 2px 0; }
.bug-label { color: #6f7891; min-width: 90px; }
.bug-value { color: #cbd3e3; font-family: monospace; overflow: hidden; text-overflow: ellipsis; }
/* Drag & drop cross-tab */
.trash-drop {
	background: #12161f; border: 1px solid #2a334d; border-radius: 8px;
	padding: 8px 12px; display: flex; align-items: center; justify-content: flex-end;
	color: #6f7891; font-size: 18px;
	margin: 4px 8px 8px; transition: all 0.2s; flex-shrink: 0;
}
.trash-drop.active { border: 2px dashed #dc2626; color: #ef4444; background: #1a1014; }
.trash-drop.hover { background: #dc2626; border-color: #ef4444; border-style: solid; color: #fff; transform: scale(1.05); }
.trash-icon { font-size: 22px; }
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.dragging { opacity: 0.4; }
.drop-target-highlight { box-shadow: 0 0 0 2px #7ea6ff, 0 0 8px rgba(126,166,255,0.3); }
.spi-badge {
	font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
	text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
/* Role/level selectors in SPI results */
.spi-role-select, .spi-level-select {
	background: #12161f; border: 1px solid #2a334d; border-radius: 2px; color: #e8e8e8;
	font-size: 11px; padding: 3px 4px; cursor: pointer; flex-shrink: 0;
}
.spi-role-select { width: 200px; }
.spi-level-select { width: 110px; }
.spi-role-select:focus, .spi-level-select:focus { border-color: #4a5a87; outline: none; }
/* Staff tab */
.staff-section-header {
	font-size: 10px; font-weight: 700; color: #6f7891;
	text-transform: uppercase; letter-spacing: 0.05em;
	padding: 10px 14px 4px; border-bottom: 1px solid #1f2330;
}
.staff-tab-item {
	display: flex; align-items: center; gap: 6px;
	padding: 5px 14px; font-size: 12px; color: #cbd3e3;
	border-bottom: 1px solid #1a1e28; cursor: pointer;
}
.staff-tab-item:hover { background: #161a24; }
.staff-status-dot {
	width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.staff-status-dot.active { background: #22c55e; }
.staff-status-dot.pending { background: #f59e0b; }
.staff-status-dot.draft { background: #6f7891; }
.staff-tab-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-tab-tags { flex-shrink: 0; display: flex; gap: 2px; }
.staff-tab-item.selected { background: #1a2540; }
.staff-tab-check { width: 14px; height: 14px; accent-color: #7ea6ff; flex-shrink: 0; cursor: pointer; }
.staff-edit-btn {
	background: none; border: 0; cursor: pointer; padding: 2px 4px;
	font-size: 13px; line-height: 1; flex-shrink: 0; opacity: 0.7;
}
.staff-edit-btn:hover { opacity: 1; }
.ds-form-label { font-size: 11px; color: #6f7891; margin-bottom: 2px; margin-top: 6px; }
.ds-select {
	background: #0c0e12; border: 1px solid #2a334d; border-radius: 6px;
	padding: 7px 10px; font-size: 12px; color: #e8e8e8; width: 100%; box-sizing: border-box;
}
.ds-select:focus { border-color: #4a5a87; outline: none; }
.ds-textarea {
	background: #0c0e12; border: 1px solid #2a334d; border-radius: 6px;
	padding: 7px 10px; font-size: 12px; color: #e8e8e8; width: 100%; box-sizing: border-box;
	resize: vertical; font-family: inherit;
}
.ds-textarea:focus { border-color: #4a5a87; outline: none; }
.spi-nc-field { font-size: 10px; padding: 4px 6px; line-height: 1.4; }
/* LinkedIn profile preview */
.linkedin-preview {
	background: #0c0e12; border: 1px solid #2a334d; border-radius: 6px;
	padding: 10px; margin-top: 6px; font-size: 11px; color: #cbd3e3;
}
.linkedin-preview .lp-name { font-weight: 700; font-size: 13px; color: #fff; }
.linkedin-preview .lp-headline { color: #7ea6ff; margin: 2px 0 6px; }
.linkedin-preview .lp-section { color: #6f7891; font-size: 10px; text-transform: uppercase; margin-top: 6px; }
.linkedin-preview .lp-item { padding: 2px 0; }
.linkedin-preview .lp-error { color: #ef4444; }

/* SPI upload review table */
.msg.spi-upload {
	background: #12161f;
	border: 1px solid #2a334d;
	border-radius: 8px;
	padding: 14px;
	max-width: 100%;
}
.spi-upload-title {
	color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 4px;
}
.spi-upload-summary {
	color: #8a92a3; font-size: 12px; margin-bottom: 12px;
}
.spi-upload-table-wrap {
	max-height: 400px; overflow-y: auto; border-radius: 6px; border: 1px solid #1f2330;
}
.spi-upload-table {
	width: 100%; border-collapse: collapse; font-size: 13px;
}
.spi-upload-table thead th {
	position: sticky; top: 0; background: #161a24; color: #cbd3e3;
	font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 1px solid #2a334d;
}
.spi-upload-table tbody td {
	padding: 7px 10px; border-bottom: 1px solid #1a1f2a; color: #e8e8e8;
}
.spi-upload-table tbody tr:hover { background: #161a24; }
.spi-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.spi-status.new { background: #1a3a2a; color: #86efac; }
.spi-status.updated { background: #1a2a3a; color: #7ea6ff; }
.spi-status.orphan { background: #3a2a1a; color: #fdba74; }
.spi-status.new-org { background: #2a1a3a; color: #c084fc; }
.spi-upload-errors {
	margin-top: 10px; padding: 10px; background: #2a1418; border: 1px solid #5a2028;
	border-radius: 6px; font-size: 12px; color: #f2b4c0;
}
.spi-upload-errors summary { cursor: pointer; font-weight: 600; }

.buffer-toggle {
	padding: 4px 8px; border-radius: 6px; border: 1px solid #2a334d;
	background: transparent; color: #cbd3e3; font-size: 16px; cursor: pointer;
	line-height: 1;
}
.buffer-toggle:hover { background: #2a334d; color: #fff; }

/* App body: chat area + buffer sidebar */
.app-body {
	flex: 1; display: flex; overflow: hidden;
}
.chat-area {
	flex: 1; display: flex; flex-direction: column; min-width: 0;
	position: relative;
}
main {
	flex: 1; overflow-y: auto;
	padding: 20px; max-width: 880px; margin: 0 auto; width: 100%;
}

/* Buffer sidebar */
.buffer-panel {
	width: 260px;
	min-width: 200px;
	background: #0c0e12;
	border-left: 1px solid #1f2330;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* Settings dropdown (header) */
.settings-dropdown { position: relative; }
.settings-btn {
	background: none; border: 0; color: #6f7891; font-size: 18px;
	cursor: pointer; padding: 4px 6px; line-height: 1;
}
.settings-btn:hover { color: #fff; }
.settings-menu {
	position: absolute; top: 100%; right: 0; z-index: 100;
	background: #12161f; border: 1px solid #2a334d; border-radius: 8px;
	padding: 10px 14px; min-width: 220px; max-height: 80vh; overflow-y: auto;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.settings-divider { border-top: 1px solid #1f2330; margin: 8px 0; }
.settings-section-title { font-size: 10px; font-weight: 700; color: #6f7891; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
/* Datasource list in settings */
.ds-list { margin-bottom: 6px; }
.ds-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 11px; color: #cbd3e3; }
.ds-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-item-del { background: none; border: 0; color: #6f7891; cursor: pointer; font-size: 12px; padding: 2px 4px; }
.ds-item-del:hover { color: #ef4444; }
.ds-add-btn { background: none; border: 1px dashed #2a334d; color: #6f7891; font-size: 11px; padding: 4px 8px; border-radius: 6px; cursor: pointer; width: 100%; }
.ds-add-btn:hover { border-color: #4a5a87; color: #cbd3e3; }
/* SPI wizard step indicators */
.spi-step-section { margin-bottom: 12px; }
.spi-step-header {
	display: flex; align-items: center; margin: 0 0 8px; font-size: 13px; color: #cbd3e3; font-weight: 600;
}
.spi-step-num {
	display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
	background: #2563eb; color: #fff; font-size: 12px; font-weight: 700;
	align-items: center; justify-content: center; margin-right: 8px; flex-shrink: 0;
}
.spi-step-done {
	font-size: 11px; color: #22c55e; padding: 2px 0 4px;
}

/* SPI scan overlay spinner */
.spi-scan-overlay {
	position: absolute; inset: 0; z-index: 10;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: rgba(11, 14, 20, 0.85); border-radius: 10px;
}
.spi-scan-overlay[hidden] { display: none; }
.spi-scan-spinner {
	width: 48px; height: 48px;
	border: 4px solid #2a334d; border-top-color: #22c55e;
	border-radius: 50%; animation: spi-spin 0.8s linear infinite;
}
.spi-scan-label {
	margin-top: 14px; color: #cbd3e3; font-size: 13px; font-weight: 600;
}
@keyframes spi-spin { to { transform: rotate(360deg); } }

/* Datasource modal */
.ds-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); }
.ds-modal[hidden] { display: none; }
.ds-modal-card { background: #12161f; border: 1px solid #2a334d; border-radius: 10px; padding: 20px; width: 340px; max-width: 90vw; max-height: 90vh; overflow-y: auto; }
.ds-modal-card h3 { margin: 0 0 10px; font-size: 15px; color: #cbd3e3; }
.ds-diagram { display: flex; justify-content: center; margin-bottom: 10px; }
.ds-mcp-icon { width: 48px; height: 48px; transition: filter 0.3s; filter: brightness(0.4); }
.ds-diagram.connected .ds-mcp-icon { filter: brightness(0) saturate(100%) invert(58%) sepia(75%) saturate(500%) hue-rotate(95deg); }
.ds-diagram.failed .ds-mcp-icon { filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(600%) hue-rotate(360deg); }
.ds-diagram.testing .ds-mcp-icon { animation: mcp-pulse 0.8s ease-in-out infinite; filter: brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(400%) hue-rotate(180deg); }
@keyframes mcp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.spi-unified-console {
	background: #0c0e12; border: 1px solid #2a334d; border-radius: 4px;
	padding: 4px 6px; font-family: monospace; font-size: 9px; color: #6f7891;
	max-height: 72px; overflow-y: auto; margin-bottom: 6px; line-height: 1.4;
}
.spi-unified-console .sc-line { display: block; }
.spi-unified-console .sc-ok { color: #22c55e; }
.spi-unified-console .sc-err { color: #ef4444; }
.spi-unified-console .sc-info { color: #7ea6ff; }
.fetch-spinner {
	display: inline-block; width: 14px; height: 14px; border: 3px solid rgba(34,197,94,0.3);
	border-top-color: #22c55e; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle;
	margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ds-form { display: flex; flex-direction: column; gap: 8px; }
.ds-form[hidden] { display: none; }
.ds-form input[type="text"], .ds-form input[type="password"], .ds-form input[type="number"] {
	background: #0c0e12; border: 1px solid #2a334d; border-radius: 6px;
	padding: 7px 10px; font-size: 12px; color: #e8e8e8; width: 100%; box-sizing: border-box;
}
.ds-form input:focus { border-color: #4a5a87; outline: none; }
.ds-row { display: flex; gap: 8px; }
.ds-row input:first-child { flex: 3; }
.ds-row input:last-child { flex: 1; }
.ds-check { font-size: 12px; color: #cbd3e3; display: flex; align-items: center; gap: 6px; }
.ds-status { font-size: 11px; padding: 6px 8px; border-radius: 6px; }
.ds-status.ok { background: #0d3320; color: #22c55e; }
.ds-status.err { background: #3b1414; color: #ef4444; }
.ds-actions { display: flex; gap: 8px; margin-top: 4px; }
.ds-btn { padding: 6px 14px; border-radius: 6px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; }
.ds-btn-test { background: #1a2540; color: #7ea6ff; }
.ds-btn-test:hover { background: #1e2d50; }
.ds-btn-save { background: #22c55e; color: #fff; }
.ds-btn-save:hover { background: #16a34a; }
.ds-btn-cancel { background: none; color: #6f7891; }
.ds-btn-cancel:hover { color: #cbd3e3; }
/* Panel org name — same look as the old header badge */
.panel-org {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 14px 6px; min-height: 32px;
}
.panel-org-name {
	font-size: 12px; font-weight: 600; color: #7ea6ff;
	background: #1a2540; border: 1px solid #2a4a87;
	padding: 4px 10px; border-radius: 12px;
	letter-spacing: 0.01em; cursor: pointer;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-org-name:hover { background: #1e2d50; border-color: #3a5a97; }
.panel-org-name:empty { display: none; }
.panel-org-name::after { content: " ▾"; font-size: 9px; opacity: 0.6; }
.org-selector { position: relative; }
.org-dropdown {
	position: absolute; top: 100%; left: 0; z-index: 100;
	background: #12161f; border: 1px solid #2a334d; border-radius: 8px;
	padding: 4px 0; min-width: 180px; margin-top: 4px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.org-dropdown-item {
	padding: 7px 14px; font-size: 12px; color: #cbd3e3;
	cursor: pointer; white-space: nowrap;
}
.org-dropdown-item:hover { background: #1a2540; color: #fff; }
.org-dropdown-item.active { color: #7ea6ff; font-weight: 600; }
.buffer-close {
	background: none; border: 0; color: #6f7891; font-size: 18px;
	cursor: pointer; padding: 2px 6px; line-height: 1;
	display: none; /* shown on mobile only */
}
.buffer-close:hover { color: #fff; }
/* Panel tabs */
.panel-tabs {
	display: flex; border-bottom: 1px solid #1f2330;
	padding: 0 8px;
}
.panel-tab {
	flex: 1; padding: 6px 4px; border: none; background: none;
	color: #6f7891; font-size: 11px; font-weight: 600;
	cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em;
	border-bottom: 2px solid transparent; transition: all 0.15s;
}
.panel-tab:hover { color: #cbd3e3; }
.panel-tab.active { color: #7ea6ff; border-bottom-color: #7ea6ff; }
/* Tab content */
.tab-content { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.tab-content.active { display: flex; }
/* Settings tab */
.settings-content { padding: 12px 14px; }
.settings-group {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 0; border-bottom: 1px solid #1f2330;
}
.settings-label { font-size: 12px; color: #cbd3e3; }
.db-status {
	flex-shrink: 0; transition: filter 0.3s; cursor: pointer;
}
.ds-mcp-sm { width: 14px; height: 14px; }
.db-status.connected .ds-mcp-sm { filter: brightness(0) saturate(100%) invert(58%) sepia(75%) saturate(500%) hue-rotate(95deg); }
.db-status.disconnected .ds-mcp-sm { filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(600%) hue-rotate(360deg); }
.pref-pill {
	font-size: 11px; padding: 2px 10px; border-radius: 10px;
	border: none; cursor: pointer; font-weight: 600;
	min-width: 38px; text-align: center; transition: background 0.15s;
}
.pref-pill.on  { background: #22c55e; color: #fff; }
.pref-pill.off { background: #ef4444; color: #fff; }
.pref-pill:hover { opacity: 0.85; }
/* Panel list items (departments, roles) */
.panel-list-item {
	padding: 7px 14px; font-size: 12px; color: #cbd3e3;
	cursor: pointer; border-bottom: 1px solid #1a1e28;
}
.panel-list-item:hover { background: #161a24; color: #fff; }
.panel-list-empty {
	padding: 16px 14px; font-size: 12px; color: #6f7891; line-height: 1.5;
}
.buffer-content {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}
.buffer-content::-webkit-scrollbar { width: 6px; }
.buffer-content::-webkit-scrollbar-track { background: transparent; }
.buffer-content::-webkit-scrollbar-thumb { background: #2a334d; border-radius: 3px; }
.buffer-content::-webkit-scrollbar-thumb:hover { background: #3a4a6d; }
.buffer-empty {
	padding: 20px 14px;
	color: #6f7891;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}
.buffer-empty code {
	background: #1a1f2a; padding: 1px 5px; border-radius: 3px;
	font-size: 11px; color: #7ea6ff;
}

/* Team card inside buffer */
.buffer-team {
	margin: 0 8px 6px;
	background: #12161f;
	border: 1px solid #2a334d;
	border-radius: 8px;
	overflow: hidden;
}
.buffer-team.active {
	border-color: #4ade80;
}
.buffer-team-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	cursor: pointer;
	user-select: none;
}
.buffer-team-header:hover { background: #161a24; }
.buffer-team-name {
	font-size: 13px;
	font-weight: 600;
	color: #e8e8e8;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.buffer-team.active .buffer-team-name { color: #e8e8e8; }
.buffer-team-count {
	font-size: 11px;
	color: #6f7891;
	margin-left: 6px;
	flex-shrink: 0;
}
.buffer-team-actions {
	display: flex; gap: 4px; margin-left: 6px; flex-shrink: 0;
}
.buffer-team-actions button {
	background: none; border: 0; color: #6f7891; font-size: 12px;
	cursor: pointer; padding: 2px 4px; line-height: 1;
}
.buffer-team-actions button:hover { color: #fff; }
.buffer-team-members {
	padding: 0 10px 8px;
}
.buffer-team-members.collapsed { display: none; }
.buffer-member {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px 0;
	font-size: 12px;
	color: #cbd3e3;
}
.buffer-member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buffer-member-remove {
	background: none; border: 0; color: #6f7891; font-size: 14px;
	cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.buffer-member-remove:hover { color: #e55; }
.buffer-member-tags {
	display: flex; gap: 2px; flex-shrink: 0; margin-left: 4px;
}
.belbin-tag-sm {
	display: inline-block;
	padding: 0 4px;
	font-size: 8px;
	font-weight: 700;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	letter-spacing: 0.3px;
	border-radius: 2px;
	line-height: 1.5;
}
.buffer-team-dot {
	width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.msg { margin-bottom: 16px; line-height: 1.55; }
.msg.user .body { color: #cfe1ff; white-space: pre-wrap; }
.msg.assistant .body { color: #e8e8e8; }
.msg.tool {
	color: #6f7891; font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
	background: #161a24; border-left: 2px solid #2a334d; padding: 6px 10px; margin-left: 12px;
	border-radius: 0 4px 4px 0; white-space: pre-wrap;
}
.msg .role { font-size: 11px; text-transform: uppercase; color: #6f7891; margin-bottom: 2px; }

/* --- Markdown rendering inside assistant bubbles --- */
.msg .markdown h1,
.msg .markdown h2,
.msg .markdown h3,
.msg .markdown h4 {
	margin: 14px 0 6px;
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
}
.msg .markdown h1 { font-size: 20px; }
.msg .markdown h2 { font-size: 17px; }
.msg .markdown h3 { font-size: 15px; }
.msg .markdown h4 { font-size: 14px; color: #cbd3e3; }
.msg .markdown p { margin: 6px 0; }
.msg .markdown ul,
.msg .markdown ol { margin: 6px 0; padding-left: 22px; }
.msg .markdown li { margin: 2px 0; }
.msg .markdown strong { color: #fff; font-weight: 600; }
.msg .markdown em { color: #cfe1ff; }
.msg .markdown code {
	background: #1a1f2a; padding: 1px 5px; border-radius: 3px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
	color: #e6c98a;
}
.msg .markdown pre {
	background: #1a1f2a; padding: 10px 12px; border-radius: 6px;
	overflow-x: auto; margin: 8px 0;
}
.msg .markdown pre code {
	background: none; padding: 0; color: #e8e8e8;
}
.msg .markdown blockquote {
	margin: 6px 0; padding-left: 12px; border-left: 3px solid #2a334d; color: #a9b1c6;
}
.msg .markdown a { color: #7ea6ff; text-decoration: underline; }
.msg .markdown hr { border: 0; border-top: 1px solid #1f2330; margin: 10px 0; }
.msg .markdown table {
	border-collapse: collapse; margin: 8px 0; font-size: 13px;
	width: auto; overflow-x: auto;
}
.msg .markdown th,
.msg .markdown td {
	border: 1px solid #2a334d; padding: 6px 10px; text-align: left;
}
.msg .markdown th { background: #161a24; color: #fff; font-weight: 600; }
.msg .markdown tr:nth-child(even) td { background: #12161f; }

/* --- Staff list (interactive multi-select) --- */
.msg.staff-list {
	background: #12161f;
	border: 1px solid #2a334d;
	border-radius: 8px;
	padding: 12px 14px;
	max-width: 860px;
}
.staff-list-title {
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 10px;
}
.staff-list-table-wrap {
	max-height: 360px;
	overflow-y: auto;
	border-radius: 6px;
	border: 1px solid #1f2330;
}
.staff-list-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.staff-list-table thead th {
	position: sticky; top: 0;
	background: #161a24;
	color: #cbd3e3;
	font-weight: 600;
	padding: 8px 10px;
	text-align: left;
	border-bottom: 1px solid #2a334d;
}
.staff-list-table tbody td {
	padding: 7px 10px;
	border-bottom: 1px solid #1a1f2a;
	color: #e8e8e8;
}
.staff-list-table tbody tr:hover { background: #161a24; }
.staff-list-table .checkbox-col { width: 36px; text-align: center; }
.staff-list-table input[type="checkbox"] {
	width: 15px; height: 15px;
	cursor: pointer;
	accent-color: #4a5a87;
}
.staff-list-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.3; }

.staff-list-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}
.staff-list-counter {
	font-size: 12px;
	color: #8a92a3;
}
.staff-list-btn {
	padding: 8px 16px;
	border-radius: 6px;
	border: 0;
	background: #4a5a87;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background 120ms ease, opacity 120ms ease;
}
.staff-list-btn:hover:not(:disabled) { background: #5a6a97; }
.staff-list-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --- Tree / org chart (coloured department cards) --- */
.msg.tree {
	background: #12161f;
	border: 1px solid #2a334d;
	border-radius: 8px;
	padding: 14px 16px;
	max-width: 1040px;
}
.tree-title {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 2px;
}
.tree-subtitle {
	color: #8a92a3;
	font-size: 12px;
	font-style: italic;
	margin-bottom: 12px;
}
.tree-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}
.tree-dept {
	/* background-color + border-left-color are set inline per department
	   so each card picks up its own hue from the JS colour generator */
	background-color: #1a2030;
	border: 1px solid #2a334d;
	border-left: 4px solid #4a5a87;
	border-radius: 6px;
	padding: 10px 12px 12px 12px;
	min-width: 0;
}
.tree-dept-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tree-dept-name {
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tree-dept-count {
	/* background-color is set inline to the card's accent hue */
	color: #0b0e14;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	flex-shrink: 0;
}
.tree-dept-roles {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: #cbd3e3;
}
.tree-role {
	line-height: 1.4;
}
.tree-role.single {
	display: flex;
	align-items: center;
	gap: 2px;
}
.tree-role-name {
	color: #e8e8e8;
	font-weight: 600;
}
.tree-role-count {
	color: #8a92a3;
	font-weight: 400;
}
.tree-person {
	color: #cbd3e3;
}
.tree-people {
	list-style: none;
	margin: 2px 0 0 10px;
	padding: 0;
}
.tree-people li {
	color: #cbd3e3;
	padding: 1px 0 1px 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}
.tree-people li::before {
	content: "·";
	position: absolute;
	left: 0;
	color: #6f7891;
	font-weight: 700;
}

/* Small colour-coded pill for a preferred Belbin role, rendered next to a
   staff name in the /tree org chart. Background + text colour are set
   inline per-pill from BELBIN_COLORS (JS) so each role keeps its canonical
   hue and the text stays legible on both light and dark pills. */
.tree-person-name {
	flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree-person-tags {
	flex-shrink: 0; white-space: nowrap;
}
.belbin-tag {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 6px;
	font-size: 9px;
	font-weight: 700;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	letter-spacing: 0.4px;
	border-radius: 3px;
	vertical-align: 1px;
	line-height: 1.4;
}

/* --- Chart bubble (radar chart message) --- */
.msg.chart {
	background: #12161f;
	border: 1px solid #2a334d;
	border-radius: 8px;
	padding: 12px 14px;
	max-width: 560px;
}
.msg.chart .chart-title {
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}
.msg.chart .chart-canvas-wrap {
	position: relative;
	height: 704px;
	width: 100%;
}
.msg.chart .chart-canvas-wrap.spread {
	height: auto;
	aspect-ratio: 16 / 9;
}
.msg.chart .chart-canvas-wrap.bars {
	height: auto;
	aspect-ratio: 16 / 12;
}
.msg.chart .chart-canvas-wrap.team-bars {
	height: auto;
	aspect-ratio: 16 / 10;
}
.msg.chart .chart-canvas-wrap.doughnut {
	height: auto;
	aspect-ratio: 16 / 9;
	max-width: 500px;
}

/* Help menu */
.msg.help-menu {
	max-width: 700px;
}
.help-org-card {
	background: #1a1f2e;
	border: 1px solid #2a334d;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 16px;
}
.help-org-name {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px 0;
}
.help-org-desc {
	color: #cbd3e3;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 12px 0;
}
.help-org-detail {
	color: #9aa3b8;
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 6px;
}
.help-org-detail strong {
	color: #cbd3e3;
}
.help-menu-title {
	color: #cbd3e3;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}
.help-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.help-menu-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 12px 14px;
	background: #1a1f2e;
	border: 1px solid #2a334d;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.help-menu-btn:hover {
	background: #232a3c;
	border-color: #3a7bd5;
}
.help-menu-btn-label {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}
.help-menu-btn-desc {
	color: #9aa3b8;
	font-size: 12px;
	line-height: 1.4;
}

form#composer {
	display: flex; gap: 8px;
	padding: 12px 20px; border-top: 1px solid #1f2330; background: #0f1115;
}
input#input {
	flex: 1; padding: 10px 14px; border-radius: 6px; border: 1px solid #2a334d;
	background: #161a24; color: #e8e8e8; font-size: 15px;
}
input#input:focus { outline: none; border-color: #4a5a87; }
button {
	padding: 10px 18px; border-radius: 6px; border: 0;
	background: #4a5a87; color: #fff; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Chart zoom modal */
.chart-modal {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
}
.chart-modal[hidden] { display: none; }
.chart-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(10, 12, 16, 0.85);
}
.chart-modal-content {
	position: relative;
	width: 80vw; height: 80vh;
	background: #12161f;
	border: 1px solid #2a334d;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.chart-modal-title {
	color: #cbd3e3; font-size: 14px; font-weight: 600;
	padding: 0 0 8px; text-align: center;
}
.chart-modal-close {
	position: absolute; top: 10px; right: 14px;
	background: none; border: 0; color: #6f7891; font-size: 24px;
	cursor: pointer; z-index: 1; line-height: 1;
}
.chart-modal-close:hover { color: #fff; }
#chart-modal-canvas {
	width: 100% !important; height: 100% !important;
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
	position: absolute;
	bottom: 100%;
	left: 12px;
	right: 12px;
	max-height: 200px;
	overflow-y: auto;
	background: #161a24;
	border: 1px solid #2a334d;
	border-radius: 8px;
	margin-bottom: 4px;
	z-index: 50;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.autocomplete-option {
	padding: 8px 12px;
	color: #e8e8e8;
	font-size: 14px;
	cursor: pointer;
}
.autocomplete-option:hover,
.autocomplete-option.active {
	background: #1a2540;
	color: #fff;
}
.autocomplete-option + .autocomplete-option {
	border-top: 1px solid #1f2330;
}

/* ===================================================================
   Responsive breakpoints
   =================================================================== */

@media (max-width: 768px) {
	.help-menu-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.msg.tree { max-width: 100%; }
}

@media (max-width: 640px) {
	header { padding: 10px 14px; }
	header h1 { font-size: 17px; }
	.active-org { font-size: 11px; padding: 3px 8px; }

	main { max-width: 100%; padding: 14px 10px; }

	.msg { margin-bottom: 12px; }
	.msg.chart { max-width: 100%; padding: 10px; }
	.msg.chart .chart-canvas-wrap { height: 500px; }
	.msg.chart .chart-canvas-wrap.spread { height: auto; aspect-ratio: 16 / 9; }
	.msg.chart .chart-canvas-wrap.bars { height: auto; aspect-ratio: 16 / 7; }
	.msg.staff-list { max-width: 100%; padding: 10px; }
	.msg.help-menu { max-width: 100%; }
	.msg.tree { padding: 10px; }

	.staff-list-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.staff-list-table { font-size: 12px; min-width: 520px; }
	.staff-list-table thead th { padding: 6px 8px; }
	.staff-list-table tbody td { padding: 6px 8px; }

	.tree-grid { grid-template-columns: 1fr; }

	.help-menu-grid { grid-template-columns: 1fr; }
	.help-org-card { padding: 12px 14px; }
	.help-org-name { font-size: 17px; }

	form#composer { padding: 10px 10px; gap: 6px; }
	input#input { padding: 10px 12px; font-size: 14px; }
	button { padding: 10px 14px; font-size: 14px; }

	/* Buffer panel: overlay on mobile */
	.buffer-panel {
		position: fixed; top: 0; right: 0; bottom: 0;
		width: 280px; z-index: 90;
		transform: translateX(100%);
		transition: transform 0.2s ease;
		box-shadow: -4px 0 20px rgba(0,0,0,0.5);
	}
	.buffer-panel.open { transform: translateX(0); }
	.buffer-close { display: block; }
}

@media (max-width: 480px) {
	header h1 { font-size: 16px; }
	.header-right { gap: 6px; }
	.user-name { font-size: 11px; }
	.logout-btn { padding: 4px 8px; font-size: 11px; }

	.msg .role { font-size: 10px; }
	.msg.staff-list { padding: 8px; }
	.staff-list-table { min-width: 460px; font-size: 11px; }

	.help-menu-btn { padding: 10px 12px; }
	.help-menu-btn-label { font-size: 13px; }

	.modal-card { padding: 20px 18px; }
}