@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;450;500&display=swap";

/* src/design/tokens/fonts.css */
:root {
  --font-display:
    "Bricolage Grotesque",
    "Sora",
    system-ui,
    sans-serif;
  --font-body:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  --font-mono:
    "JetBrains Mono",
    ui-monospace,
    "SFMono-Regular",
    monospace;
}

/* src/design/tokens/colors.css */
:root {
  --slate-950: #0E1016;
  --slate-900: #13151D;
  --slate-800: #1A1D27;
  --slate-700: #20242F;
  --slate-600: #272B38;
  --slate-500: #313647;
  --slate-400: #454C61;
  --slate-300: #677087;
  --slate-200: #9DA3B2;
  --slate-150: #C4C9D4;
  --slate-100: #E2E4EB;
  --warm-100: #ECE9E1;
  --warm-200: #CFCBC0;
  --warm-300: #A8A498;
  --amber-700: #B07A1E;
  --amber-600: #D29A2C;
  --amber-500: #F0B341;
  --amber-400: #F4C25E;
  --amber-300: #F8D285;
  --steel-600: #4E86A8;
  --steel-500: #6FA8C7;
  --steel-400: #8FBFD9;
  --steel-300: #B2D6E8;
  --green-600: #4A9D65;
  --green-500: #5FB87A;
  --green-400: #7CC794;
  --coral-600: #CE5743;
  --coral-500: #E8705A;
  --coral-400: #ED8B78;
  --bg-canvas: var(--slate-900);
  --bg-inset: var(--slate-950);
  --bg-surface: var(--slate-800);
  --bg-raised: var(--slate-700);
  --bg-overlay: var(--slate-600);
  --border-subtle: var(--slate-600);
  --border-default: var(--slate-500);
  --border-strong: var(--slate-400);
  --text-primary: var(--warm-100);
  --text-secondary: var(--slate-200);
  --text-tertiary: var(--slate-300);
  --text-disabled: var(--slate-400);
  --text-on-accent: #15171F;
  --text-link: var(--steel-400);
  --accent: var(--amber-500);
  --accent-hover: var(--amber-400);
  --accent-pressed: var(--amber-600);
  --accent-subtle: rgba(240, 179, 65, 0.12);
  --status-auto: var(--green-500);
  --status-pending: var(--amber-500);
  --status-escalation: var(--coral-500);
  --status-idle: var(--slate-300);
  --status-info: var(--steel-500);
  --status-auto-subtle: rgba(95, 184, 122, 0.12);
  --status-pending-subtle: rgba(240, 179, 65, 0.12);
  --status-escalation-subtle: rgba(232, 112, 90, 0.12);
  --status-idle-subtle: rgba(103, 112, 135, 0.14);
  --status-info-subtle: rgba(111, 168, 199, 0.12);
  --on-auto: var(--green-400);
  --on-pending: var(--amber-400);
  --on-escalation: var(--coral-400);
  --on-info: var(--steel-300);
  --on-accent-text: var(--amber-300);
  --rule-cond-text: var(--steel-300);
  --msg-agent-text: var(--warm-100);
  --msg-you-bg: #3D6F8E;
  --window-idle: var(--slate-800);
  --focus-ring: var(--steel-400);
}
[data-theme=light] {
  --bg-canvas: #F2F3F7;
  --bg-inset: #E7E9EF;
  --bg-surface: #FFFFFF;
  --bg-raised: #F7F8FB;
  --bg-overlay: #FFFFFF;
  --border-subtle: #E4E6EC;
  --border-default: #D2D6DF;
  --border-strong: #B3B9C6;
  --text-primary: #16181F;
  --text-secondary: #3D4458;
  --text-tertiary: #5C6479;
  --text-disabled: #9DA3B2;
  --text-on-accent: #15171F;
  --text-link: #3C6E8C;
  --accent: var(--amber-500);
  --accent-hover: var(--amber-400);
  --accent-pressed: var(--amber-600);
  --accent-subtle: rgba(214, 152, 26, 0.16);
  --status-idle: var(--slate-300);
  --status-auto-subtle: rgba(74, 157, 101, 0.16);
  --status-pending-subtle: rgba(214, 152, 26, 0.16);
  --status-escalation-subtle: rgba(206, 87, 67, 0.15);
  --status-idle-subtle: rgba(103, 112, 135, 0.14);
  --status-info-subtle: rgba(78, 134, 168, 0.15);
  --on-auto: #2F7A4A;
  --on-pending: #8A5D10;
  --on-escalation: #B8412E;
  --on-info: #3C6E8C;
  --on-accent-text: #8A5D10;
  --rule-cond-text: #3C6E8C;
  --msg-agent-text: var(--text-primary);
  --msg-you-bg: #3C6E8C;
  --window-idle: #DBDFE7;
  --glow-active: 0 0 16px rgba(214, 152, 26, 0.35);
  --glow-attention: 0 0 22px rgba(214, 152, 26, 0.50);
  --glow-danger: 0 0 20px rgba(206, 87, 67, 0.35);
  --focus-ring: var(--steel-600);
}

/* src/design/tokens/typography.css */
:root {
  --type-display-xl-size: 48px;
  --type-display-xl-line: 52px;
  --type-display-xl-weight: 600;
  --type-display-xl-tracking: -0.02em;
  --type-display-l-size: 36px;
  --type-display-l-line: 40px;
  --type-display-l-weight: 600;
  --type-display-l-tracking: -0.02em;
  --type-h1-size: 28px;
  --type-h1-line: 34px;
  --type-h1-weight: 600;
  --type-h1-tracking: -0.01em;
  --type-h2-size: 22px;
  --type-h2-line: 28px;
  --type-h2-weight: 600;
  --type-h2-tracking: -0.01em;
  --type-h3-size: 18px;
  --type-h3-line: 24px;
  --type-h3-weight: 600;
  --type-h3-tracking: 0;
  --type-body-l-size: 16px;
  --type-body-l-line: 24px;
  --type-body-l-weight: 400;
  --type-body-size: 14px;
  --type-body-line: 20px;
  --type-body-weight: 400;
  --type-label-size: 13px;
  --type-label-line: 18px;
  --type-label-weight: 500;
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-weight: 500;
  --type-eyebrow-size: 11px;
  --type-eyebrow-line: 14px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-tracking: 0.08em;
  --type-data-size: 13px;
  --type-data-line: 18px;
  --type-data-weight: 450;
}
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line);
  font-weight: var(--type-display-xl-weight);
  letter-spacing: var(--type-display-xl-tracking);
}
.t-display-l {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-line);
  font-weight: var(--type-display-l-weight);
  letter-spacing: var(--type-display-l-tracking);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
}
.t-body-l {
  font-family: var(--font-body);
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-line);
  font-weight: var(--type-body-l-weight);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
}
.t-label {
  font-family: var(--font-body);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
}
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}
.t-data {
  font-family: var(--font-mono);
  font-size: var(--type-data-size);
  line-height: var(--type-data-line);
  font-weight: var(--type-data-weight);
}

/* src/design/tokens/spacing.css */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --content-max: 1440px;
  --nav-rail-width: 248px;
  --right-panel-width: 360px;
}

/* src/design/tokens/radii.css */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
}

/* src/design/tokens/elevation.css */
:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --glow-active: 0 0 20px rgba(240, 179, 65, 0.30);
  --glow-attention: 0 0 28px rgba(240, 179, 65, 0.45);
  --glow-danger: 0 0 24px rgba(232, 112, 90, 0.35);
}
[data-theme=light] {
  --shadow-sm: 0 1px 2px rgba(22, 24, 31, 0.08);
  --shadow-md: 0 6px 16px rgba(22, 24, 31, 0.10);
  --shadow-lg: 0 18px 48px rgba(22, 24, 31, 0.16);
}

/* src/design/tokens/motion.css */
:root {
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-ambient: 1600ms;
  --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-ambient: 0ms;
  }
}

/* src/design/components/components.css */
.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-move),
    border-color var(--dur-fast) var(--ease-move),
    color var(--dur-fast) var(--ease-move),
    box-shadow var(--dur-fast) var(--ease-move),
    transform var(--dur-instant) var(--ease-move);
}
.vc-btn--md {
  height: 40px;
  padding: 0 var(--space-4);
  font-size: 14px;
}
.vc-btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 13px;
}
.vc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring);
}
.vc-btn:active {
  transform: translateY(0.5px);
}
.vc-btn[disabled],
.vc-btn[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}
.vc-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.vc-btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-active);
}
.vc-btn--primary:active {
  background: var(--accent-pressed);
  box-shadow: none;
}
.vc-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.vc-btn--secondary:hover {
  background: var(--bg-raised);
  border-color: var(--border-strong);
}
.vc-btn--secondary:active {
  background: var(--bg-surface);
}
.vc-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.vc-btn--ghost:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}
.vc-btn--ghost:active {
  background: var(--bg-surface);
}
.vc-btn--destructive {
  background: var(--coral-600);
  color: var(--warm-100);
}
.vc-btn--destructive:hover {
  background: var(--coral-500);
  box-shadow: var(--glow-danger);
}
.vc-btn--destructive:active {
  background: var(--coral-600);
  box-shadow: none;
}
.vc-btn__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: vc-spin 0.7s linear infinite;
}
@keyframes vc-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vc-btn__spinner {
    animation-duration: 1.4s;
  }
}
.vc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--dur-fast) var(--ease-move),
    color var(--dur-fast) var(--ease-move),
    border-color var(--dur-fast) var(--ease-move);
}
.vc-iconbtn--md {
  width: 40px;
  height: 40px;
}
.vc-iconbtn--sm {
  width: 32px;
  height: 32px;
}
.vc-iconbtn:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}
.vc-iconbtn:active {
  background: var(--bg-surface);
}
.vc-iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring);
}
.vc-iconbtn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}
.vc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}
.vc-field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.vc-field__label[data-optional]::after {
  content: " \2014  opcjonalne";
  color: var(--text-tertiary);
  font-weight: 400;
}
.vc-field__hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-tertiary);
}
.vc-field__error {
  font-size: 12px;
  line-height: 16px;
  color: var(--coral-400);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.vc-input,
.vc-select,
.vc-textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color var(--dur-fast) var(--ease-move),
    box-shadow var(--dur-fast) var(--ease-move),
    background var(--dur-fast) var(--ease-move);
}
.vc-input,
.vc-select {
  height: 40px;
}
.vc-textarea {
  padding: var(--space-3);
  min-height: 88px;
  line-height: 20px;
  resize: vertical;
}
.vc-input::placeholder,
.vc-textarea::placeholder {
  color: var(--text-disabled);
}
.vc-input:hover,
.vc-select:hover,
.vc-textarea:hover {
  border-color: var(--border-strong);
}
.vc-input:focus,
.vc-select:focus,
.vc-textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 2px rgba(143, 191, 217, 0.25);
}
.vc-input[data-error=true],
.vc-select[data-error=true],
.vc-textarea[data-error=true] {
  border-color: var(--coral-500);
}
.vc-input[data-error=true]:focus,
.vc-textarea[data-error=true]:focus {
  box-shadow: 0 0 0 2px rgba(232, 112, 90, 0.25);
}
.vc-input[disabled],
.vc-textarea[disabled],
.vc-select[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-surface);
}
.vc-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23677087' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}
.vc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}
.vc-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex: none;
}
.vc-pill--auto {
  background: var(--status-auto-subtle);
  color: var(--on-auto);
}
.vc-pill--auto .vc-pill__dot {
  background: var(--status-auto);
}
.vc-pill--pending {
  background: var(--status-pending-subtle);
  color: var(--on-pending);
  border-color: var(--amber-600);
}
.vc-pill--pending .vc-pill__dot {
  background: var(--status-pending);
  box-shadow: var(--glow-active);
}
.vc-pill--escalation {
  background: var(--status-escalation-subtle);
  color: var(--on-escalation);
}
.vc-pill--escalation .vc-pill__dot {
  background: var(--status-escalation);
}
.vc-pill--idle {
  background: var(--status-idle-subtle);
  color: var(--text-secondary);
}
.vc-pill--idle .vc-pill__dot {
  background: var(--status-idle);
}
.vc-pill--info {
  background: var(--status-info-subtle);
  color: var(--on-info);
}
.vc-pill--info .vc-pill__dot {
  background: var(--status-info);
}
.vc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  background: var(--accent);
  color: var(--text-on-accent);
}
.vc-badge--count {
  background: var(--coral-500);
  color: var(--warm-100);
}
.vc-badge--neutral {
  background: var(--bg-overlay);
  color: var(--text-secondary);
}
.vc-tooltip {
  position: relative;
  display: inline-flex;
}
.vc-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-enter), transform var(--dur-fast) var(--ease-enter);
  z-index: 50;
}
.vc-tooltip:hover .vc-tooltip__bubble,
.vc-tooltip:focus-within .vc-tooltip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.vc-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
}
.vc-tab {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-3);
  position: relative;
  transition: color var(--dur-fast) var(--ease-move);
}
.vc-tab:hover {
  color: var(--text-secondary);
}
.vc-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: var(--radius-sm);
}
.vc-tab[aria-selected=true] {
  color: var(--text-primary);
}
.vc-tab[aria-selected=true]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius-full);
}
.vc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.vc-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.vc-switch__track {
  width: 38px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--slate-500);
  transition: background var(--dur-base) var(--ease-move);
  position: relative;
}
.vc-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--warm-100);
  transition: transform var(--dur-base) var(--ease-move);
}
.vc-switch input:checked + .vc-switch__track {
  background: var(--accent);
}
.vc-switch input:checked + .vc-switch__track .vc-switch__thumb {
  transform: translateX(16px);
  background: var(--text-on-accent);
}
.vc-switch input:focus-visible + .vc-switch__track {
  box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring);
}
.vc-switch input:disabled + .vc-switch__track {
  opacity: 0.45;
  cursor: not-allowed;
}
.vc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.vc-card--interactive {
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-move),
    background var(--dur-fast) var(--ease-move),
    box-shadow var(--dur-fast) var(--ease-move);
}
.vc-card--interactive:hover {
  border-color: var(--border-default);
  background: var(--bg-raised);
}

/* src/design/components/product/product.css */
.vc-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 600;
  flex: none;
  overflow: visible;
}
.vc-avatar__img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.vc-avatar--xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.vc-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.vc-avatar--md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.vc-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 19px;
}
.vc-avatar__ring {
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
}
.vc-avatar__ring--auto {
  border-color: var(--status-auto);
}
.vc-avatar__ring--pending {
  border-color: var(--status-pending);
  box-shadow: var(--glow-active);
}
.vc-avatar__ring--escalation {
  border-color: var(--status-escalation);
  box-shadow: var(--glow-danger);
}
.vc-avatar__ring--idle {
  border-color: var(--status-idle);
}
.vc-avatar__ring--info {
  border-color: var(--status-info);
}
.vc-avatar__dept {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--bg-overlay);
  border: 2px solid var(--bg-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--text-secondary);
}
.vc-avatar-stack {
  display: inline-flex;
}
.vc-avatar-stack > * {
  margin-left: -10px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--bg-surface);
}
.vc-avatar-stack > *:first-child {
  margin-left: 0;
}
.vc-avatar-stack__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
}
.vc-emp {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-move), box-shadow var(--dur-fast) var(--ease-move);
}
.vc-emp--interactive {
  cursor: pointer;
}
.vc-emp--interactive:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}
.vc-emp__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.vc-emp__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.vc-emp__role {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.vc-emp__task {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  padding: var(--space-3);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
}
.vc-emp__task-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}
.vc-emp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vc-emp__autonomy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}
.vc-dial {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  font-family: var(--font-body);
}
.vc-dial__zone {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-inset);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 140px;
}
.vc-dial__zone--ask {
  border-color: var(--amber-600);
  background: var(--accent-subtle);
}
.vc-dial__zhead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.vc-dial__zdot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}
.vc-dial__zone--self .vc-dial__zdot {
  background: var(--status-auto);
}
.vc-dial__zone--ask .vc-dial__zdot {
  background: var(--status-pending);
  box-shadow: var(--glow-active);
}
.vc-dial__zone--esc .vc-dial__zdot {
  background: var(--status-escalation);
}
.vc-dial__ztitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.vc-dial__zsub {
  font-size: 11px;
  color: var(--text-tertiary);
}
.vc-dial__chip {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  cursor: grab;
  transition: border-color var(--dur-fast) var(--ease-move), background var(--dur-fast) var(--ease-move);
}
.vc-dial__chip:hover {
  border-color: var(--border-default);
  background: var(--bg-overlay);
}
.vc-dial__zone--ask .vc-dial__chip {
  background: rgba(240, 179, 65, 0.10);
  border-color: var(--amber-700);
  color: var(--on-accent-text);
}
.vc-kpi {
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.vc-kpi__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.vc-kpi__value {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.vc-kpi__value--mono {
  font-family: var(--font-mono);
  font-size: 32px;
  letter-spacing: 0;
}
.vc-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 12px;
}
.vc-kpi__trend--up {
  color: var(--on-auto);
}
.vc-kpi__trend--down {
  color: var(--on-escalation);
}
.vc-kpi__trend--flat {
  color: var(--on-info);
}
.vc-activity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-move);
}
.vc-activity:hover {
  background: var(--bg-raised);
}
.vc-activity__body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}
.vc-activity__actor {
  color: var(--text-primary);
  font-weight: 500;
}
.vc-activity__object {
  color: var(--text-primary);
}
.vc-activity__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  flex: none;
}
.vc-activity__mode {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  flex: none;
}
.vc-activity__mode--auto {
  background: var(--status-auto-subtle);
  color: var(--on-auto);
}
.vc-activity__mode--approved {
  background: var(--accent-subtle);
  color: var(--on-pending);
}
.vc-activity__mode--rejected {
  background: var(--status-escalation-subtle);
  color: var(--on-escalation);
}
.vc-activity__mode--escalation {
  background: var(--status-escalation-subtle);
  color: var(--on-escalation);
}
.vc-approval {
  background: var(--bg-surface);
  border: 1px solid var(--amber-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.vc-approval__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.vc-approval__draft {
  padding: var(--space-4);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
  background: var(--bg-inset);
  margin: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.vc-approval__why {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: 0 var(--space-4) var(--space-4);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-tertiary);
}
.vc-approval__why b {
  color: var(--on-accent-text);
  font-weight: 500;
}
.vc-approval__actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.vc-msg {
  display: flex;
  gap: var(--space-3);
  max-width: 78%;
}
.vc-msg--you {
  margin-left: auto;
  flex-direction: row-reverse;
}
.vc-msg__bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 15px;
  line-height: 22px;
}
.vc-msg--client .vc-msg__bubble {
  background: var(--bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: var(--radius-sm);
}
.vc-msg--agent .vc-msg__bubble {
  background: var(--accent-subtle);
  color: var(--msg-agent-text);
  border: 1px solid var(--amber-700);
  border-bottom-left-radius: var(--radius-sm);
}
.vc-msg--you .vc-msg__bubble {
  background: var(--msg-you-bg);
  color: var(--warm-100);
  border-bottom-right-radius: var(--radius-sm);
}
.vc-msg__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}
.vc-msg--you .vc-msg__meta {
  text-align: right;
}
.vc-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.vc-rule__seg {
  font-size: 13px;
  color: var(--text-secondary);
}
.vc-rule__seg--dept {
  color: var(--text-primary);
  font-weight: 500;
}
.vc-rule__cond {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rule-cond-text);
  background: var(--bg-inset);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.vc-rule__arrow {
  color: var(--text-tertiary);
}
.vc-rule__result {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.vc-rule__result--self {
  background: var(--status-auto-subtle);
  color: var(--on-auto);
}
.vc-rule__result--ask {
  background: var(--accent-subtle);
  color: var(--on-pending);
}
.vc-rule__result--esc {
  background: var(--status-escalation-subtle);
  color: var(--on-escalation);
}
.vc-rule__spacer {
  flex: 1;
}
.vc-window {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--window-idle);
  position: relative;
  overflow: hidden;
  transition:
    background var(--dur-ambient) var(--ease-enter),
    box-shadow var(--dur-ambient) var(--ease-enter),
    border-color var(--dur-base) var(--ease-move);
}
.vc-window__desk {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 14%;
  height: 22%;
  border-radius: 2px;
  background: rgba(14, 16, 22, 0.5);
}
.vc-window--idle {
  background: var(--window-idle);
}
.vc-window--active {
  background: var(--amber-700);
  border-color: var(--amber-500);
  box-shadow: var(--glow-active);
}
.vc-window--active .vc-window__desk {
  background: rgba(120, 80, 10, 0.55);
}
.vc-window--pending {
  background: var(--amber-600);
  border-color: var(--amber-400);
  box-shadow: var(--glow-attention);
  animation: vc-window-pulse 1.6s var(--ease-enter) infinite;
}
.vc-window--escalation {
  background: var(--coral-600);
  border-color: var(--coral-400);
  box-shadow: var(--glow-danger);
}
@keyframes vc-window-pulse {
  0%, 100% {
    box-shadow: var(--glow-active);
  }
  50% {
    box-shadow: var(--glow-attention);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vc-window--pending {
    animation: none;
  }
}
.vc-navrail {
  width: var(--nav-rail-width);
  background: var(--bg-canvas);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-1);
  box-sizing: border-box;
}
.vc-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-move), color var(--dur-fast) var(--ease-move);
}
.vc-nav-item:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}
.vc-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.vc-nav-item__icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
}
.vc-nav-item__label {
  flex: 1;
}
.vc-nav-item--active {
  background: var(--accent-subtle);
  color: var(--on-accent-text);
}
.vc-nav-item--active .vc-nav-item__icon {
  color: var(--accent);
}
.vc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.vc-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.vc-table td {
  font-size: 14px;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.vc-table tbody tr {
  transition: background var(--dur-fast) var(--ease-move);
}
.vc-table tbody tr:hover {
  background: var(--bg-raised);
}
.vc-table tbody tr[aria-selected=true] {
  background: var(--accent-subtle);
}
.vc-table--compact th {
  padding: var(--space-2) var(--space-3);
}
.vc-table--compact td {
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
}
.vc-table__num,
.vc-table__time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  text-align: right;
}
.vc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 13, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.vc-modal {
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 480px;
  max-width: calc(100vw - 48px);
  overflow: hidden;
}
.vc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.vc-modal__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.vc-modal__body {
  padding: var(--space-5);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}
.vc-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.vc-slideover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--right-panel-width);
  max-width: 100vw;
  background: var(--bg-overlay);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.vc-slideover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.vc-slideover__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}
.vc-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  min-width: 280px;
}
.vc-toast__accent {
  width: 3px;
  align-self: stretch;
  border-radius: var(--radius-full);
  flex: none;
}
.vc-toast--success .vc-toast__accent {
  background: var(--status-auto);
}
.vc-toast--info .vc-toast__accent {
  background: var(--status-info);
}
.vc-toast--error .vc-toast__accent {
  background: var(--status-escalation);
}
.vc-toast__msg {
  flex: 1;
}
.vc-toast__action {
  background: none;
  border: none;
  color: var(--text-link);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.vc-toast__action:hover {
  color: var(--steel-300);
}
.vc-skeleton {
  background:
    linear-gradient(
      90deg,
      var(--bg-raised) 25%,
      var(--bg-overlay) 50%,
      var(--bg-raised) 75%);
  background-size: 200% 100%;
  animation: vc-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes vc-shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vc-skeleton {
    animation: none;
  }
}

/* src/design/styles.css */

/* src/design/kwatera.css */
.kw-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-inset);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kw-scene__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 70% at 50% 118%,
      rgba(240, 179, 65, 0.10),
      transparent 58%),
    radial-gradient(
      90% 60% at 50% 130%,
      rgba(232, 112, 90, 0.05),
      transparent 60%);
}
.kw-scene--uwaga .kw-scene__glow {
  background:
    radial-gradient(
      120% 70% at 50% 118%,
      rgba(240, 179, 65, 0.08),
      transparent 58%),
    radial-gradient(
      70% 55% at 72% 122%,
      rgba(232, 112, 90, 0.10),
      transparent 55%);
}
.kw-scene__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(
      1px 1px at 20% 22%,
      rgba(143, 191, 217, 0.25),
      transparent),
    radial-gradient(
      1px 1px at 68% 16%,
      rgba(143, 191, 217, 0.18),
      transparent),
    radial-gradient(
      1px 1px at 82% 30%,
      rgba(236, 233, 225, 0.12),
      transparent),
    radial-gradient(
      1px 1px at 36% 12%,
      rgba(236, 233, 225, 0.10),
      transparent);
}
.kw-stage {
  position: relative;
  z-index: 1;
  transition: transform var(--dur-slow) var(--ease-move);
}
.kw-building {
  position: relative;
  width: 600px;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}
.kw-building__side {
  position: absolute;
  top: 0;
  bottom: 22px;
  right: 0;
  width: 34px;
  transform: translateX(100%);
  background:
    linear-gradient(
      105deg,
      var(--slate-900),
      var(--slate-950));
  border-right: 1px solid var(--slate-950);
  clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%);
}
.kw-building__roof {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  transform: translateY(-100%);
  background:
    linear-gradient(
      180deg,
      var(--slate-600),
      var(--slate-700));
  border: 1px solid var(--slate-500);
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  clip-path: polygon(0 0, calc(100%) 0, 100% 100%, 0 100%);
}
.kw-building__roof::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 100%;
  transform: translateX(100%) skewY(-37deg);
  transform-origin: left top;
  background: var(--slate-700);
  border-right: 1px solid var(--slate-500);
}
.kw-building__ridge {
  position: absolute;
  top: -3px;
  left: 6px;
  right: 6px;
  height: 3px;
  background: var(--slate-400);
  border-radius: 2px;
  opacity: 0.6;
}
.kw-facade {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      var(--slate-800),
      var(--slate-900));
  border: 1px solid var(--border-default);
  border-radius: 2px;
  padding: var(--space-3) var(--space-5) 0;
}
.kw-floor {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast) var(--ease-move), opacity var(--dur-base) var(--ease-move);
}
.kw-floor + .kw-floor {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.kw-floor:hover {
  background: rgba(255, 255, 255, 0.025);
}
.kw-floor:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.kw-scene--floorsel .kw-floor {
  opacity: 0.4;
}
.kw-scene--floorsel .kw-floor--sel {
  opacity: 1;
  background: rgba(240, 179, 65, 0.05);
  box-shadow: inset 0 0 0 1px var(--amber-700);
}
.kw-floor__label {
  width: 168px;
  flex: none;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kw-floor__dept {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.kw-floor__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.kw-floor__meta .kw-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
}
.kw-floor__rooms {
  flex: 1;
  display: flex;
  gap: 12px;
}
.kw-floor__cta {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translate(100%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--on-accent-text);
  background: var(--accent-subtle);
  border: 1px solid var(--amber-700);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-move);
  pointer-events: none;
}
.kw-floor--sel .kw-floor__cta {
  opacity: 1;
}
.kw-room {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}
.kw-win {
  position: relative;
  width: 100%;
  max-width: 64px;
  height: 58px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
}
.kw-win .vc-window {
  display: block;
  width: 100%;
  height: 100%;
}
.kw-win--empty {
  cursor: default;
}
.kw-win:focus-visible {
  outline: none;
}
.kw-win:focus-visible .vc-window {
  box-shadow: 0 0 0 2px var(--focus-ring), 0 0 0 4px var(--bg-inset);
}
.kw-win .vc-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      rgba(14, 16, 22, 0.45) calc(50% - 0.5px),
      rgba(14, 16, 22, 0.45) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(
      to bottom,
      transparent calc(42% - 0.5px),
      rgba(14, 16, 22, 0.45) calc(42% - 0.5px),
      rgba(14, 16, 22, 0.45) calc(42% + 0.5px),
      transparent calc(42% + 0.5px));
  pointer-events: none;
  border-radius: inherit;
}
@keyframes kw-ping {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.5);
  }
  100% {
    filter: brightness(1);
  }
}
.kw-win--ping .vc-window {
  animation: kw-ping 900ms var(--ease-enter);
}
@media (prefers-reduced-motion: reduce) {
  .kw-win--ping .vc-window {
    animation: none;
  }
}
.kw-room__av {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.kw-pop {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 264px;
  z-index: 30;
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  text-align: left;
  cursor: default;
  animation: kw-pop-in var(--dur-fast) var(--ease-enter);
}
@keyframes kw-pop-in {
  from {
    transform: translate(-50%, 5px);
  }
  to {
    transform: translate(-50%, 0);
  }
}
.kw-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-overlay);
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  margin-top: -5px;
}
.kw-pop__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.kw-pop__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.kw-pop__role {
  font-size: 12px;
  color: var(--text-tertiary);
}
.kw-pop__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.kw-pop__task-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.kw-pop__task {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.kw-pop__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.kw-lobby {
  margin-top: var(--space-2);
  padding: 14px var(--space-2) 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.kw-lobby__sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-300);
}
.kw-lobby__door {
  width: 92px;
  height: 38px;
  border-radius: 6px 6px 2px 2px;
  flex: none;
  background:
    linear-gradient(
      180deg,
      rgba(244, 194, 94, 0.55),
      rgba(176, 122, 30, 0.18));
  border: 1px solid var(--amber-500);
  box-shadow: var(--glow-active);
  position: relative;
}
.kw-lobby__door::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 0;
  width: 1px;
  background: rgba(14, 16, 22, 0.45);
  transform: translateX(-50%);
}
.kw-ground {
  position: relative;
  z-index: 1;
  height: 1px;
  margin-top: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--slate-400),
      transparent);
}
.kw-base-label {
  text-align: center;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kw-hud {
  height: 68px;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
}
.kw-hud__brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: none;
  white-space: nowrap;
}
.kw-hud__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-accent-text);
}
.kw-hud__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.kw-hud__when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  flex: none;
  white-space: nowrap;
}
.kw-temp {
  flex: none;
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kw-temp__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.kw-temp__head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kw-temp__legend {
  display: flex;
  gap: var(--space-3);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.kw-temp__legend b {
  color: var(--text-primary);
  font-weight: 600;
}
.kw-temp__leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kw-temp__leg .kw-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}
.kw-temp__bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
}
.kw-temp__seg {
  height: 100%;
  transition: width var(--dur-slow) var(--ease-move);
}
.kw-temp__seg--done {
  background: var(--status-auto);
}
.kw-temp__seg--wait {
  background: var(--status-pending);
}
.kw-temp__seg--esc {
  background: var(--status-escalation);
}
.kw-hud__spacer {
  flex: 1;
}
.kw-hud__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}
.kw-seg {
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.kw-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-move), color var(--dur-fast) var(--ease-move);
}
.kw-seg__btn:hover {
  color: var(--text-primary);
}
.kw-seg__btn--on {
  background: var(--bg-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.kw-seg__btn .kw-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}
.kw-seg__label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.kw-seg__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.kw-bell {
  position: relative;
}
.kw-bell__dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--coral-500);
  border: 2px solid var(--bg-canvas);
  box-shadow: var(--glow-danger);
}
.kw-main {
  display: flex;
  flex: 1;
  min-height: 0;
}
.kw-live {
  width: var(--right-panel-width);
  flex: none;
  background: var(--bg-canvas);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: margin-right var(--dur-slow) var(--ease-move);
}
.kw-live--closed {
  margin-right: calc(-1 * var(--right-panel-width));
}
.kw-live__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.kw-live__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.kw-live__pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--status-auto);
  box-shadow: var(--glow-active);
}
.kw-scene--uwaga ~ .kw-live .kw-live__pulse {
  background: var(--status-escalation);
  box-shadow: var(--glow-danger);
}
.kw-counts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.kw-count {
  background: var(--bg-canvas);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kw-count__val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
}
.kw-count__val--wait {
  color: var(--on-pending);
}
.kw-count__val--esc {
  color: var(--on-escalation);
}
.kw-count__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.3;
}
.kw-feed {
  flex: 1;
  overflow-y: auto;
}
.kw-feed__group-label {
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kw-calm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
}
.kw-calm__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--status-auto);
  background: var(--status-auto-subtle);
  border: 1px solid rgba(95, 184, 122, 0.3);
}
.kw-calm__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.kw-calm__sub {
  font-size: 13px;
  line-height: 19px;
  color: var(--text-tertiary);
  max-width: 240px;
}
.kw-live__foot {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kw-live-reopen {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 5;
}

/* src/styles.css */
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */