/* Company City: 3D company map. Everything is scoped under .cc-root. */
.cc-root {
	--cc-bg: #070e1c;
	--cc-glass: rgba(10, 20, 40, 0.72);
	--cc-line: rgba(120, 170, 255, 0.18);
	--cc-text: #e2e8f0;
	--cc-muted: #8fa3c0;
	--cc-ok: #22c55e;
	--cc-warn: #f59e0b;
	--cc-err: #ef4444;
	--cc-agent: #a78bfa;
	position: relative;
	width: 100%;
	min-height: 420px;
	overflow: hidden;
	border-radius: 18px;
	background: radial-gradient(ellipse at 50% 40%, #0f1d38 0%, var(--cc-bg) 70%);
	color: var(--cc-text);
	font: 13px/1.45 "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
	box-shadow: 0 30px 80px -30px rgba(4, 10, 30, 0.8), inset 0 0 0 1px rgba(80, 140, 255, 0.15);
	isolation: isolate;
	text-align: left;
}
.cc-root *, .cc-root *::before, .cc-root *::after { box-sizing: border-box; }
.cc-root button { font: inherit; cursor: pointer; }
.cc-root h4, .cc-root h5, .cc-root p, .cc-root ul { margin: 0; padding: 0; }
.cc-root ul { list-style: none; }
.cc-root:fullscreen { border-radius: 0; height: 100vh !important; }
/* Span the whole window, past the template's content container. --cc-vw is the
   window width without the scrollbar, set by city.js; 100vw is the fallback. */
.cc-root.cc-bleed {
	width: var(--cc-vw, 100vw); max-width: none;
	margin-left: calc(50% - var(--cc-vw, 100vw) / 2);
	margin-right: calc(50% - var(--cc-vw, 100vw) / 2);
	border-radius: 0;
}
.cc-hidden { display: none !important; }

.cc-stage { position: absolute; inset: 0; z-index: 0; }
.cc-stage canvas { display: block; outline: none; touch-action: none; }
.cc-labels { position: absolute; inset: 0; pointer-events: none; }

.cc-boot, .cc-error {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px;
	color: var(--cc-muted); font-size: 14px; letter-spacing: .02em;
}
.cc-error { color: #fca5a5; padding: 24px; text-align: center; }
.cc-boot-spin {
	width: 22px; height: 22px; border-radius: 50%;
	border: 2px solid rgba(56, 189, 248, .25); border-top-color: #38bdf8;
	animation: cc-spin 0.8s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ---------------- top bar */
.cc-top {
	position: absolute; left: 0; right: 0; top: 0; z-index: 3;
	display: flex; align-items: center; gap: 18px; padding: 14px 18px 26px;
	background: linear-gradient(180deg, rgba(5, 11, 24, 0.92) 0%, rgba(5, 11, 24, 0.6) 65%, rgba(5, 11, 24, 0) 100%);
	pointer-events: none;
}
.cc-top > * { pointer-events: auto; }
.cc-top-min .cc-brand { display: none; }
.cc-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; }
.cc-logo {
	width: 38px; height: 38px; border-radius: 11px; flex: none; position: relative;
	background: conic-gradient(from 200deg, #38bdf8, #8b5cf6, #ec4899, #f59e0b, #22c55e, #38bdf8);
	box-shadow: 0 0 24px rgba(99, 102, 241, .55);
}
.cc-logo span { position: absolute; inset: 3px; border-radius: 8px; background: #0b1630; }
.cc-logo span::after {
	content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 16px;
	background: linear-gradient(90deg, #38bdf8 0 22%, transparent 22% 39%, #a78bfa 39% 61%, transparent 61% 78%, #f472b6 78%);
	clip-path: polygon(0 45%, 22% 45%, 22% 100%, 39% 100%, 39% 0, 61% 0, 61% 100%, 78% 100%, 78% 25%, 100% 25%, 100% 100%, 0 100%);
}
.cc-title { font-size: 16px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.cc-sub { font-size: 12px; color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cc-kpis { display: flex; gap: 8px; flex: 1 1 auto; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.cc-kpis::-webkit-scrollbar { display: none; }
.cc-kpi {
	display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 9px; flex: none;
	background: var(--cc-glass); border: 1px solid var(--cc-line); border-radius: 12px;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cc-kpi-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(56, 189, 248, .12); font-size: 14px; }
.cc-kpi-1 .cc-kpi-ic { background: rgba(167, 139, 250, .16); }
.cc-kpi-3 .cc-kpi-ic { background: rgba(245, 158, 11, .15); }
.cc-kpi-5 .cc-kpi-ic { background: rgba(34, 197, 94, .15); }
.cc-kpi b { display: block; font-size: 17px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.cc-kpi b small { font-size: 12px; color: var(--cc-muted); font-weight: 500; }
.cc-kpi em { display: block; font-style: normal; font-size: 11px; color: var(--cc-muted); white-space: nowrap; }
.cc-kpi-alert { border-color: rgba(239, 68, 68, .55); animation: cc-alert 1.2s ease-in-out infinite; }
.cc-kpi-alert .cc-kpi-ic { background: rgba(239, 68, 68, .2); }
@keyframes cc-alert { 50% { box-shadow: 0 0 18px rgba(239, 68, 68, .45); } }

.cc-live {
	flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 12px;
	font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #86efac;
	background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .35); border-radius: 999px;
}
.cc-live b { color: #e2e8f0; letter-spacing: .04em; font-variant-numeric: tabular-nums; font-weight: 600; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-ok); box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); animation: cc-ping 1.6s infinite; }
@keyframes cc-ping { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* ---------------- building labels */
.cc-label {
	--c: #38bdf8;
	pointer-events: auto; cursor: pointer; user-select: none;
	min-width: 0; padding: 5px 8px; border-radius: 9px;
	background: rgba(8, 16, 34, .82); border: 1px solid rgba(255, 255, 255, .08);
	border-top: 2px solid var(--c);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 18px -6px var(--c);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	transition: transform .2s, box-shadow .2s;
	font: 11px/1.3 "Roboto", "Segoe UI", system-ui, sans-serif; color: var(--cc-text);
}
.cc-label:hover, .cc-label.cc-active { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 26px -4px var(--c); }
.cc-label::after {
	content: ""; position: absolute; left: 50%; bottom: -26px; width: 1px; height: 26px;
	background: linear-gradient(var(--c), transparent); opacity: .7;
}
.cc-label-head { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; color: #fff; white-space: nowrap; }
.cc-ic { font-size: 14px; }
.cc-health { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; background: #64748b; }
.cc-h-ok { background: var(--cc-ok); box-shadow: 0 0 8px var(--cc-ok); }
.cc-h-warn { background: var(--cc-warn); box-shadow: 0 0 8px var(--cc-warn); }
.cc-h-err { background: var(--cc-err); box-shadow: 0 0 10px var(--cc-err); animation: cc-blink .7s infinite; }
@keyframes cc-blink { 50% { opacity: .3; } }
.cc-label-stats { display: flex; gap: 7px; margin-top: 3px; font-size: 10.5px; color: #cbd5e1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-label-stats .cc-warn { color: #fcd34d; }
.cc-label-stats .cc-err { color: #fca5a5; }
.cc-label-team { margin-top: 2px; font-size: 10.5px; color: var(--cc-muted); white-space: nowrap; }
.cc-label-team b { color: #86efac; }

.cc-bubble {
	max-width: 220px; padding: 6px 10px; border-radius: 10px; margin-left: 150px;
	background: rgba(15, 23, 42, .92); border: 1px solid rgba(148, 163, 184, .3);
	color: #f1f5f9; font: 11.5px/1.35 "Roboto", "Segoe UI", system-ui, sans-serif;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .4); animation: cc-pop .35s cubic-bezier(.2, 1.4, .4, 1);
	transition: opacity .5s, transform .5s; pointer-events: none;
}
.cc-bubble i { font-style: normal; margin-right: 6px; }
.cc-bubble-done, .cc-bubble-approve { border-color: rgba(34, 197, 94, .6); }
.cc-bubble-error { border-color: rgba(239, 68, 68, .7); }
.cc-bubble-review { border-color: rgba(245, 158, 11, .7); }
.cc-bubble.cc-out { opacity: 0; transform: translateY(-10px); }
@keyframes cc-pop { from { opacity: 0; transform: translateY(8px) scale(.85); } }

/* ---------------- live feed */
.cc-feed {
	position: absolute; left: 16px; bottom: 54px; z-index: 3; width: 310px; max-height: 34%;
	display: flex; flex-direction: column;
	background: var(--cc-glass); border: 1px solid var(--cc-line); border-radius: 14px;
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden;
}
.cc-feed-head {
	display: flex; align-items: center; justify-content: space-between; padding: 9px 12px;
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-muted);
	border-bottom: 1px solid var(--cc-line);
}
.cc-feed-toggle { background: none; border: 0; color: var(--cc-muted); font-size: 16px; line-height: 1; padding: 0 4px; }
.cc-feed.cc-collapsed .cc-feed-list { display: none; }
.cc-feed-list { overflow-y: auto; padding: 4px 0; scrollbar-width: thin; scrollbar-color: #24406b transparent; }
.cc-ev { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px; }
.cc-ev:hover { background: rgba(56, 189, 248, .07); }
.cc-ev time { flex: none; color: #64748b; font-variant-numeric: tabular-nums; font-size: 11px; padding-top: 1px; }
.cc-ev-ic {
	--c: #64748b; flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center;
	font-size: 10px; color: #fff; background: color-mix(in srgb, var(--c) 35%, transparent); border: 1px solid var(--c);
}
.cc-ev-msg { color: #cbd5e1; }
.cc-ev-error .cc-ev-msg { color: #fca5a5; }
.cc-ev-approve .cc-ev-msg, .cc-ev-done .cc-ev-msg { color: #bbf7d0; }
.cc-ev-new { animation: cc-slide .5s ease-out; }
@keyframes cc-slide { from { opacity: 0; transform: translateX(-14px); background: rgba(56, 189, 248, .18); } }

/* ---------------- department panel */
.cc-panel {
	--c: #38bdf8;
	position: absolute; top: 84px; right: 16px; bottom: 54px; z-index: 4; width: 370px;
	padding: 16px; overflow-y: auto;
	background: rgba(8, 16, 34, .86); border: 1px solid var(--cc-line); border-radius: 16px;
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	box-shadow: -10px 0 40px rgba(0, 0, 0, .35), inset 0 2px 0 var(--c);
	transform: translateX(calc(100% + 30px)); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s;
	scrollbar-width: thin; scrollbar-color: #24406b transparent;
}
.cc-panel.cc-open { transform: none; opacity: 1; }
.cc-panel-head { display: flex; gap: 12px; align-items: flex-start; }
.cc-panel-ic {
	flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
	background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
	box-shadow: 0 0 22px -6px var(--c);
}
.cc-panel-head h4 { font-size: 18px; color: #fff; font-weight: 700; }
.cc-panel-head p { font-size: 12px; color: var(--cc-muted); margin-top: 2px; }
.cc-close {
	margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 9px;
	background: rgba(148, 163, 184, .1); border: 1px solid var(--cc-line); color: #cbd5e1;
}
.cc-close:hover { background: rgba(148, 163, 184, .2); }
.cc-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 12px; }
.cc-chips div { padding: 8px 4px; text-align: center; border-radius: 10px; background: rgba(148, 163, 184, .07); border: 1px solid var(--cc-line); }
.cc-chips b { display: block; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.cc-chips span { font-size: 10.5px; color: var(--cc-muted); }
.cc-flow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.cc-flow div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cc-flow span { font-size: 11px; color: var(--cc-muted); margin-right: 2px; min-width: 82px; }
.cc-flow button {
	--c: #38bdf8; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: #fff;
	background: color-mix(in srgb, var(--c) 20%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.cc-sec {
	display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px;
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-muted); font-weight: 700;
}
.cc-sec span { letter-spacing: 0; text-transform: none; font-weight: 500; }
.cc-people { display: flex; flex-direction: column; gap: 6px; }
.cc-person { display: flex; gap: 10px; padding: 9px; border-radius: 12px; background: rgba(148, 163, 184, .06); border: 1px solid rgba(148, 163, 184, .1); }
.cc-person.cc-agent { background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(56, 189, 248, .05)); border-color: rgba(167, 139, 250, .25); }
.cc-av {
	--c: #38bdf8; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	font-size: 12px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--c) 55%, #0f172a);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}
.cc-av-agent { border-radius: 10px; font-size: 18px; background: linear-gradient(135deg, #7c3aed, #0ea5e9); box-shadow: 0 0 14px -2px rgba(139, 92, 246, .8); }
.cc-person-main { flex: 1; min-width: 0; }
.cc-person-top { display: flex; align-items: center; gap: 6px; }
.cc-person-top b { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-real { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(34, 197, 94, .18); color: #86efac; white-space: nowrap; }
.cc-st { margin-left: auto; flex: none; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; }
.cc-st-busy { background: rgba(34, 197, 94, .15); color: #86efac; }
.cc-st-idle { background: rgba(148, 163, 184, .14); color: #cbd5e1; }
.cc-st-error { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.cc-st-offline { background: rgba(71, 85, 105, .3); color: #94a3b8; }
.cc-role { font-size: 11.5px; color: var(--cc-muted); margin-top: 1px; }
.cc-model { color: #c4b5fd; }
.cc-work { margin-top: 6px; font-size: 11.5px; color: #e2e8f0; }
.cc-bar { height: 4px; border-radius: 4px; background: rgba(148, 163, 184, .16); margin-top: 5px; overflow: hidden; }
.cc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c), #38bdf8); transition: width 1.2s ease; }
.cc-tgroup { margin-bottom: 10px; }
.cc-tgroup h5 { font-size: 12px; color: #cbd5e1; font-weight: 600; margin-bottom: 5px; display: flex; gap: 6px; align-items: center; }
.cc-tgroup h5 span { font-size: 10.5px; padding: 0 6px; border-radius: 6px; background: rgba(148, 163, 184, .15); color: var(--cc-muted); }
.cc-tg-review h5 { color: #fcd34d; }
.cc-tg-blocked h5 { color: #fca5a5; }
.cc-tg-done h5 { color: #86efac; }
.cc-tgroup li { padding: 7px 9px; border-radius: 9px; background: rgba(148, 163, 184, .05); margin-bottom: 4px; border-left: 2px solid rgba(148, 163, 184, .25); }
.cc-tg-doing li { border-left-color: var(--c); }
.cc-tg-review li { border-left-color: var(--cc-warn); }
.cc-tg-blocked li { border-left-color: var(--cc-err); }
.cc-tg-done li { border-left-color: var(--cc-ok); opacity: .75; }
.cc-task-title { font-size: 12px; color: #f1f5f9; }
.cc-task-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--cc-muted); margin-top: 2px; }
.cc-prio { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 5px; background: rgba(239, 68, 68, .2); color: #fca5a5; margin-right: 6px; }
.cc-muted { color: var(--cc-muted); font-size: 12px; }

/* ---------------- legend, tools, tooltip */
.cc-legend {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
	display: flex; gap: 14px; padding: 6px 14px; white-space: nowrap;
	background: var(--cc-glass); border: 1px solid var(--cc-line); border-radius: 999px;
	font-size: 11px; color: var(--cc-muted); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cc-legend span { display: flex; align-items: center; gap: 6px; }
.cc-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cc-lg-human { background: #f1c7a5; }
.cc-lg-agent { background: var(--cc-agent); box-shadow: 0 0 8px var(--cc-agent); transform: rotate(45deg); border-radius: 2px !important; }
.cc-lg-flow { height: 2px !important; width: 16px !important; border-radius: 0 !important; background: repeating-linear-gradient(90deg, #f97316 0 4px, transparent 4px 7px); }
.cc-lg-ok { border: 2px solid var(--cc-ok); }
.cc-lg-warn { border: 2px solid var(--cc-warn); }
.cc-lg-err { border: 2px solid var(--cc-err); }

.cc-tools { position: absolute; right: 16px; bottom: 14px; z-index: 3; display: flex; gap: 6px; }
.cc-has-panel .cc-tools { right: 400px; }
.cc-has-panel .cc-legend { display: none; }
.cc-tools button {
	width: 34px; height: 34px; border-radius: 10px; color: #cbd5e1; font-size: 16px;
	background: var(--cc-glass); border: 1px solid var(--cc-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cc-tools button:hover, .cc-tools button.cc-on { color: #fff; border-color: rgba(56, 189, 248, .6); background: rgba(56, 189, 248, .18); }

.cc-tooltip {
	position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
	padding: 6px 10px; border-radius: 9px; background: rgba(2, 6, 23, .92); border: 1px solid var(--cc-line);
	font-size: 12px; opacity: 0; transition: opacity .15s;
}
.cc-tooltip.cc-show { opacity: 1; }
.cc-tooltip b { display: block; color: #fff; }
.cc-tooltip span { color: var(--cc-muted); font-size: 11px; }

.cc-fallback { position: absolute; inset: 90px 16px 60px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; align-content: start; overflow: auto; }
.cc-fallback button {
	--c: #38bdf8; text-align: left; padding: 12px; border-radius: 12px; color: #fff;
	background: rgba(148, 163, 184, .07); border: 1px solid rgba(148, 163, 184, .18); border-top: 2px solid var(--c);
}
.cc-fallback span { display: block; color: var(--cc-muted); font-size: 12px; margin-top: 4px; }

/* public mode hides the internal clutter */
.cc-mode-public .cc-label-team b { display: none; }

/* ---------------- narrow screens */
@media (max-width: 900px) {
	.cc-legend { display: none; }
	.cc-feed { width: 280px; }
}
@media (max-width: 760px) {
	.cc-root { border-radius: 12px; }
	.cc-top { flex-wrap: wrap; gap: 8px; padding: 10px 12px 18px; }
	.cc-brand { flex: 1 1 60%; }
	.cc-live { order: 2; padding: 5px 9px; }
	.cc-kpis { order: 3; flex-basis: 100%; justify-content: flex-start; }
	.cc-kpi { padding: 5px 9px 5px 6px; }
	.cc-kpi b { font-size: 15px; }
	.cc-feed { left: 10px; right: 10px; width: auto; bottom: 56px; max-height: 30%; }
	.cc-feed:not(.cc-collapsed) { max-height: 30%; }
	.cc-panel { left: 10px; right: 10px; width: auto; top: auto; bottom: 10px; max-height: 70%; transform: translateY(calc(100% + 20px)); }
	.cc-has-panel .cc-tools { right: 10px; }
	.cc-tools { right: 10px; bottom: 10px; }
	.cc-has-panel .cc-feed { display: none; }
	.cc-label { min-width: 0; padding: 4px 7px; }
	.cc-label-head { font-size: 11px; }
	.cc-label-stats, .cc-label-team { display: none; }
	.cc-bubble { display: none; }
}