/* Forge — Corporate Memphis: bold flat color-blocking (violet/coral/teal/
   mustard), big blobby corners, soft colored "flat" shadows instead of
   neutral elevation, rounded display type (Quicksand headings / Nunito
   body, both self-hosted in fonts/ — no runtime call to Google's CDN, in
   keeping with this app's no-third-party-services design). Layered on top
   of Bootstrap + vendor/dashq/css/{base,theme,cards}.css, which provide
   --bs-* tokens, the color-preset swatches, and Bootstrap/jKanban component
   behavior. Light theme by default; true neutral dark theme via
   [data-bs-theme="dark"] (Bootstrap's own convention) or
   prefers-color-scheme when unset. Existing component selectors reference
   --bg/--surface/--surface-2/--border/--shadow-sm/--shadow-md/--radius* —
   those are re-pointed at the Memphis values below so most components
   restyle without any selector-level edits. */

@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('fonts/nunito-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/quicksand-variable.woff2') format('woff2');
}

/* Corporate Memphis violet as the default accent swatch (the existing
   accent-color picker in Settings still works — this just retints its
   default "Indigo" option instead of replacing the mechanism). */
[data-theme="theme-indigo"] { --bs-primary: #7C5CFF; --bs-primary-rgb: 124, 92, 255; }

:root {
  --m3-primary: var(--bs-primary);
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: rgba(var(--bs-primary-rgb), .18);
  --m3-on-primary-container: var(--bs-primary-dark);
  --m3-on-surface: #2B2440;
  --m3-on-surface-variant: #6B6380;
  --m3-outline: #B7AAD9;
  --m3-outline-variant: #E8E1F9;
  --m3-error: #FF5A5F;
  --m3-error-container: #FFE1DE;
  /* Tonal surface scale — each step a touch lighter than the last (light
     mode). Cards/panels are distinguished from the page by THIS tone shift,
     not by a border or a permanent shadow. */
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #FBF8FF;
  --surface-container: #F3EEFC;
  --surface-container-high: #ECE3FA;
  --surface-container-highest: #E3D6F7;
  --bg: #F6F2FE;
  --surface: var(--surface-container-lowest);
  --surface-2: var(--surface-container);
  --surface-sunken: var(--surface-container-high);
  --border: var(--m3-outline-variant);
  --border-strong: var(--m3-outline);
  --text: var(--m3-on-surface);
  --text-muted: var(--m3-on-surface-variant);
  --text-faint: #9C93B5;
  --accent: var(--bs-primary);
  --accent-hover: var(--bs-primary-dark);
  --accent-soft: var(--m3-primary-container);
  --accent-soft-strong: rgba(var(--bs-primary-rgb), .32);
  --accent-gradient: linear-gradient(135deg, var(--bs-primary), #FF7A59); /* violet -> coral, Memphis's favorite hero gradient */
  --on-accent: var(--m3-on-primary);
  --success: #22C3A6;
  --success-soft: #D8F7EF;
  --danger: var(--m3-error);
  --danger-soft: var(--m3-error-container);
  --warn: #FFB03A;
  --warn-soft: #FFF1D6;
  /* Blobby Memphis shape scale — no sharp corners anywhere. */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 9999px;
  /* Flat design shadows — soft, tinted with the brand color, never neutral
     gray. Reads as a color-blocked flat illustration, not a lifted card. */
  --elevation-1: 0px 2px 10px rgba(124,92,255,.10);
  --elevation-2: 0px 6px 20px rgba(124,92,255,.14);
  --elevation-3: 0px 14px 36px rgba(124,92,255,.18);
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --accent-glow: 0 0 0 4px rgba(var(--bs-primary-rgb), .16);
  --scrollbar-thumb: var(--m3-outline);
  --dot-grid-color: var(--m3-outline-variant);
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Quicksand', var(--font-sans);
  --font-mono: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 26px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --surface-rgb: 255, 255, 255;
  --blob-bg:
    radial-gradient(circle at 92% -8%, rgba(255,122,89,.22), transparent 40%),
    radial-gradient(circle at -8% 18%, rgba(124,92,255,.20), transparent 38%),
    radial-gradient(circle at 100% 92%, rgba(46,196,182,.16), transparent 36%),
    radial-gradient(circle at 8% 100%, rgba(255,176,58,.14), transparent 32%);
}

:root[data-bs-theme="dark"] {
  --m3-primary: var(--bs-primary);
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: rgba(var(--bs-primary-rgb), .30);
  --m3-on-primary-container: #FFFFFF;
  --m3-on-surface: #F1ECFF;
  --m3-on-surface-variant: #C9BEE8;
  --m3-outline: #6F6592;
  --m3-outline-variant: #3A3160;
  --m3-error: #FF8A8F;
  --m3-error-container: #5C1E24;
  /* Dark mode: deep navy-violet instead of neutral gray-black — surfaces get
     LIGHTER (more violet) as they become more elevated. */
  --surface-container-lowest: #14102A;
  --surface-container-low: #1C1638;
  --surface-container: #221C42;
  --surface-container-high: #2A234E;
  --surface-container-highest: #322A5C;
  --bg: #100C22;
  --surface: var(--surface-container-low);
  --surface-2: var(--surface-container);
  --surface-sunken: var(--surface-container-lowest);
  --border: var(--m3-outline-variant);
  --border-strong: var(--m3-outline);
  --text: var(--m3-on-surface);
  --text-muted: var(--m3-on-surface-variant);
  --text-faint: #8F84B0;
  --accent: var(--bs-primary);
  --accent-hover: var(--bs-primary-dark);
  --accent-soft: var(--m3-primary-container);
  --accent-soft-strong: rgba(var(--bs-primary-rgb), .4);
  --accent-gradient: linear-gradient(135deg, var(--bs-primary), #FF8A73);
  --on-accent: var(--m3-on-primary);
  --success: #34E0C0;
  --success-soft: rgba(52, 224, 192, .16);
  --danger: #FF8A8F;
  --danger-soft: rgba(255, 90, 95, .18);
  --warn: #FFC96B;
  --warn-soft: rgba(255, 176, 58, .18);
  --elevation-1: 0px 2px 12px rgba(0,0,0,.45);
  --elevation-2: 0px 6px 22px rgba(0,0,0,.5);
  --elevation-3: 0px 14px 40px rgba(0,0,0,.55);
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --accent-glow: 0 0 0 4px rgba(var(--bs-primary-rgb), .28);
  --scrollbar-thumb: var(--m3-outline);
  --dot-grid-color: var(--m3-outline-variant);
  --surface-rgb: 28, 22, 56;
  --blob-bg:
    radial-gradient(circle at 92% -8%, rgba(255,138,115,.20), transparent 40%),
    radial-gradient(circle at -8% 18%, rgba(139,123,255,.24), transparent 38%),
    radial-gradient(circle at 100% 92%, rgba(52,224,192,.16), transparent 36%),
    radial-gradient(circle at 8% 100%, rgba(255,201,107,.14), transparent 32%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --m3-primary: var(--bs-primary); --m3-on-primary: #FFFFFF;
    --m3-primary-container: rgba(var(--bs-primary-rgb), .30); --m3-on-primary-container: #FFFFFF;
    --m3-on-surface: #F1ECFF; --m3-on-surface-variant: #C9BEE8;
    --m3-outline: #6F6592; --m3-outline-variant: #3A3160;
    --m3-error: #FF8A8F; --m3-error-container: #5C1E24;
    --surface-container-lowest: #14102A; --surface-container-low: #1C1638;
    --surface-container: #221C42; --surface-container-high: #2A234E; --surface-container-highest: #322A5C;
    --bg: #100C22; --surface: var(--surface-container-low); --surface-2: var(--surface-container);
    --surface-sunken: var(--surface-container-lowest);
    --border: var(--m3-outline-variant); --border-strong: var(--m3-outline);
    --text: var(--m3-on-surface); --text-muted: var(--m3-on-surface-variant); --text-faint: #8F84B0;
    --accent: var(--bs-primary); --accent-hover: var(--bs-primary-dark);
    --accent-soft: var(--m3-primary-container); --accent-soft-strong: rgba(var(--bs-primary-rgb), .4);
    --accent-gradient: linear-gradient(135deg, var(--bs-primary), #FF8A73); --on-accent: var(--m3-on-primary);
    --success: #34E0C0; --success-soft: rgba(52, 224, 192, .16);
    --danger: #FF8A8F; --danger-soft: rgba(255, 90, 95, .18); --warn: #FFC96B; --warn-soft: rgba(255, 176, 58, .18);
    --elevation-1: 0px 2px 12px rgba(0,0,0,.45);
    --elevation-2: 0px 6px 22px rgba(0,0,0,.5);
    --elevation-3: 0px 14px 40px rgba(0,0,0,.55);
    --shadow-sm: var(--elevation-1); --shadow-md: var(--elevation-2); --accent-glow: 0 0 0 4px rgba(var(--bs-primary-rgb), .28);
    --scrollbar-thumb: var(--m3-outline); --dot-grid-color: var(--m3-outline-variant);
    --surface-rgb: 28, 22, 56;
    --blob-bg:
      radial-gradient(circle at 92% -8%, rgba(255,138,115,.20), transparent 40%),
      radial-gradient(circle at -8% 18%, rgba(139,123,255,.24), transparent 38%),
      radial-gradient(circle at 100% 92%, rgba(52,224,192,.16), transparent 36%),
      radial-gradient(circle at 8% 100%, rgba(255,201,107,.14), transparent 32%);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: #000000;
  background-image: var(--blob-bg); background-color: var(--bg); background-attachment: fixed;
  font-family: var(--font-sans); font-size: 15px; font-weight: 750; -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.01em; margin: 0 0 .5em; color: #000000; }
.view-title, .doc-title, .story-title, .chat-title, .list-toolbar h2 { font-family: var(--font-heading); font-weight: 800; color: #000000; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--m3-primary); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* Retint Bootstrap's own shape/shadow tokens so vendor components (offcanvas
   drawers, dropdowns, form controls, modals) pick up the same blobby-corner,
   flat-shadow language as the rest of the app without per-component edits. */
:root {
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-2xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);
  --bs-box-shadow: var(--elevation-2);
  --bs-box-shadow-sm: var(--elevation-1);
  --bs-box-shadow-lg: var(--elevation-3);
}
.offcanvas { background: var(--surface); color: #000000; }
.settings-hero { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 18px; }
.offcanvas-end { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.offcanvas-start { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.dropdown-menu { border: none; border-radius: var(--radius); box-shadow: var(--elevation-2); }

.app { display: flex; flex-direction: row; height: 100vh; }

/* ---------- Boot loader ---------- */
.app-loader {
  position: fixed; inset: 0; z-index: 9999; background: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity .4s ease, visibility .4s ease;
}
.app-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.app-loader-badge {
  width: 84px; height: 84px; border-radius: 50%; background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: var(--elevation-3); animation: loaderPulse 1.8s ease-in-out infinite;
}
.app-loader-mark { width: 44px; height: 44px; fill: #FFFFFF; position: relative; z-index: 1; }
.app-loader-ring {
  position: absolute; inset: -8px; border-radius: 50%; border: 3px solid transparent;
  border-top-color: var(--accent); border-right-color: var(--accent);
  animation: loaderSpin 1s linear infinite;
}
.app-loader-word { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #000000; letter-spacing: .2px; }

@keyframes loaderPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* ---------- Login gate ----------
   Facebook-style pattern (wordmark+tagline left, card right, two-tone
   buttons) — this is the visual-craft pass on top of that: an icon+wordmark
   lockup instead of flat colored text, the app's own --blob-bg behind
   everything instead of flat --bg, a layered shadow + gradient on the
   primary button, and the SSO button restyled as an outlined pill so it
   reads as a clear secondary action rather than competing with "Log In". */
.login-gate {
  position: fixed; inset: 0; z-index: 9998;
  background-image: var(--blob-bg); background-color: var(--bg); background-attachment: fixed;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  transition: opacity .3s ease, visibility .3s ease;
}
.login-gate.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.login-shell {
  display: flex; align-items: center; justify-content: center; gap: 80px;
  width: 100%; max-width: 1040px; animation: loginRise .55s var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) { .login-shell { animation: none; } }
@keyframes loginRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.login-brand-col { flex: 1 1 440px; max-width: 460px; }
.login-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-mark {
  width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 8px 20px -6px var(--accent-soft-strong);
}
.login-mark svg { width: 24px; height: 24px; fill: var(--on-accent); }
.login-wordmark {
  font-family: var(--font-heading); font-weight: 700; color: var(--text);
  font-size: clamp(30px, 3.6vw, 38px); line-height: 1; margin: 0; letter-spacing: -.01em;
}
.login-tagline {
  font-size: clamp(17px, 1.8vw, 20px); line-height: 1.5; color: var(--text-muted);
  max-width: 30ch; margin: 0; font-weight: 600;
}
.login-tagline strong { color: var(--text); font-weight: 800; }

.login-card {
  flex: 0 0 400px; width: 400px; max-width: 100%;
  background: var(--surface-container-lowest); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--elevation-3); padding: 34px 32px 28px;
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field input {
  width: 100%; border: 1.5px solid var(--border-strong); background: var(--bg);
  border-radius: var(--radius-sm); padding: 15px 16px; font-size: 15px; color: var(--text);
  font-family: var(--font-sans); font-weight: 600; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-field input::placeholder { color: var(--text-faint); font-weight: 500; }
.login-field input:focus { border-color: var(--accent); background: var(--surface-container-lowest); box-shadow: var(--accent-glow); }

.login-error {
  display: none; align-items: center; gap: 8px;
  color: var(--danger); font-size: 12.5px; font-weight: 700; background: var(--danger-soft);
  border-radius: var(--radius-sm); padding: 10px 13px; margin: 0;
}
.login-error.show { display: flex; }
.login-error-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; }

/* Self-contained (not combined with .btn-primary) — that class is redefined
   twice elsewhere in this file with a flat background/6px radius/narrower
   padding, and since it'd tie on specificity with .login-submit, source
   order would let those later rules silently win over this gradient/shadow/
   radius on whichever properties they also touch. */
.login-submit {
  width: 100%; border: none; cursor: pointer; font-family: var(--font-sans);
  border-radius: var(--radius-sm); padding: 14px; margin-top: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent); font-size: 16px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 24px -10px var(--accent-soft-strong);
  transition: transform .15s, box-shadow .15s;
}
.login-submit:hover { transform: translateY(-1px); }
.login-submit:active { transform: translateY(0); }
.login-submit:disabled { opacity: .7; cursor: default; transform: none; }

.login-sso-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 18px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.login-sso-divider .rule { flex: 1; height: 1px; background: var(--border); }

.login-sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 auto;
  padding: 12px 22px; font-size: 14.5px; font-weight: 800; border-radius: var(--radius-sm);
  background: var(--surface-container-lowest); color: var(--success); border: 1.5px solid var(--success);
  cursor: pointer; transition: background .15s, transform .15s;
}
.login-sso-btn:hover { background: var(--success-soft); transform: translateY(-1px); }

.login-footer {
  text-align: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-faint);
}
.login-footer strong { color: var(--accent); font-weight: 700; }

@media (max-width: 860px) {
  .login-shell { flex-direction: column; gap: 36px; text-align: center; }
  .login-brand-col { max-width: 440px; }
  .login-lockup { justify-content: center; }
  .login-tagline { margin: 0 auto; }
}

/* ---------- Left sidebar ---------- */
/* ---------- M3 Navigation Rail ---------- */
.app-sidebar {
  width: 85px; flex-shrink: 0; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 1px;
  overflow-x: hidden; overflow-y: auto;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 20;
  transition: width var(--duration-base) var(--ease-out);
}
.app-sidebar.collapsed {
  width: 70px;
}
.app-sidebar.collapsed .rail-label {
  display: none;
}
.sidebar-brand { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--accent-gradient); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex-shrink: 0; box-shadow: var(--elevation-2); position: relative; cursor: pointer; }
.brand-mark { width: 26px; height: 26px; fill: var(--on-accent); position: relative; z-index: 0;
  transition: opacity var(--duration-base) var(--ease-out); }
.sidebar-brand:hover .brand-mark { opacity: 0; }
#sidebarToggle { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 20px;
  opacity: 0; transition: opacity var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); }
.sidebar-brand:hover #sidebarToggle { opacity: 1; background: rgba(0,0,0,.15); }
.sidebar-nav { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; overflow-y: auto; overflow-x: hidden; flex: 1; }
/* The tonal "active indicator" pill sits behind the icon zone only, not the
   whole nav item — JS computes its position from the icon-pill's offset
   within each button, not the button's own offset, since the button is
   taller than the icon (icon + label stacked). Sized to match
   .rail-icon-pill below; keep the two in sync if either changes. */
.sidebar-indicator {
  position: absolute; left: 50%; top: 0; width: 60px; height: 50px; margin-left: -30px;
  border-radius: var(--radius-full); background: var(--m3-primary-container);
  opacity: 0; pointer-events: none;
  transition: transform var(--duration-base) var(--ease-spring), opacity var(--duration-fast) var(--ease-out);
}
.sidebar-indicator.ready { opacity: 1; }
.sidebar-nav button {
  position: relative; width: 65px; height: 65px; border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: all var(--duration-base) var(--ease-out);
}
.rail-icon-pill { position: relative; width: 44px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all var(--duration-base) var(--ease-out); }
.rail-label { font-size: 9px; font-weight: 750; letter-spacing: .1px; line-height: 1.1; text-align: center; color: #000000; }
.sidebar-nav button:hover .rail-icon-pill { background: var(--accent-soft); }
.sidebar-nav button.active .rail-icon-pill { background: var(--m3-primary); color: white; box-shadow: var(--elevation-1); }
.sidebar-nav button.active .rail-label { color: #000000; font-weight: 800; }
.sidebar-nav .nav-badge {
  position: absolute; top: -2px; right: 2px; background: var(--danger); color: #fff; font-size: 8.5px; font-weight: 700;
  padding: 1px 5px; border-radius: var(--radius-full); line-height: 1.4; box-shadow: 0 0 0 2px var(--surface);
}
.nav-badge:empty { display: none; }

/* ---------- Content column ---------- */
.app-content { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: 85px; transition: margin-left var(--duration-base) var(--ease-out); }
.app-sidebar.collapsed ~ .app-content { margin-left: 55px; }
.app-topbar {
  display: flex; align-items: center; gap: 8px; padding: 16px 28px;
  background: var(--surface); flex-shrink: 0; position: relative; z-index: 2;
}
.view-title { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-lg); color: #000000; letter-spacing: -.015em; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.presence-badge {
  font-size: 12px; color: var(--text-muted); padding: 7px 15px;
  border-radius: var(--radius-full); display: flex; align-items: center; gap: 7px; background: var(--surface);
  font-weight: 700; box-shadow: var(--shadow-sm);
}
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.presence-dot.live { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm); border: none; background: var(--surface);
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px;
  box-shadow: var(--shadow-sm); transition: color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.icon-btn:hover { color: var(--accent); box-shadow: var(--elevation-2); }
.icon-btn:active { box-shadow: none; background: var(--accent-soft); }
.profile-btn { font-size: 18px; }
.profile-menu { border: none; border-radius: var(--radius-lg); box-shadow: var(--elevation-3); min-width: 200px; }
.profile-menu .dropdown-header { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 10px 16px 6px; }
.profile-menu .dropdown-item { padding: 10px 16px; font-size: 13.5px; color: #000000; display: flex; align-items: center; gap: 10px; }
.profile-menu .dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }
.profile-menu .dropdown-item i { width: 16px; }
.profile-menu .dropdown-divider { margin: 6px 0; }
.profile-menu .text-danger { color: var(--danger); }
.profile-menu .text-danger:hover { background: var(--danger-soft); }

/* ---------- Right rail ---------- */
.app-rightbar {
  width: 68px; flex-shrink: 0; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; padding: 20px 0; gap: 14px;
}
.rail-channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
.rail-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full); border: none; background: var(--surface-2);
  color: var(--text-muted); font-weight: 800; font-size: 13.5px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.rail-avatar:hover { color: #000000; box-shadow: var(--elevation-1); }
.rail-avatar.active { color: var(--m3-on-primary-container); background: var(--accent-soft); box-shadow: none; }
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; }

main.main { flex: 1; overflow: hidden; position: relative; background-color: #FFFFFF; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; animation: view-in var(--duration-slow) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .view.active { animation: none; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ---------- Buttons — M3's 5 variants mapped onto Forge's 4 classes:
   Filled / Filled Tonal / Text / Outlined(error). All fully pill-shaped. ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  border-radius: var(--radius-full); cursor: pointer; font-weight: 700; font-size: 15px;
  padding: 14px 32px; border: none; transition: all var(--duration-base) var(--ease-out); color: #000000;
}
.btn-primary { background: var(--m3-primary); color: var(--m3-on-primary); box-shadow: var(--elevation-1); }
.btn-primary:hover { box-shadow: var(--elevation-2); filter: brightness(1.08); transform: translateY(-2px); }
.btn-primary:active { filter: brightness(.96); box-shadow: var(--elevation-1); transform: translateY(0); }
.btn-secondary { background: var(--m3-primary-container); color: var(--m3-on-primary-container); box-shadow: var(--elevation-1); }
.btn-secondary:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }
.btn-secondary:active { filter: brightness(.96); box-shadow: var(--elevation-1); transform: translateY(0); }
.btn-ghost { background: var(--accent-soft); color: var(--m3-primary); border: none; box-shadow: none; }
.btn-ghost:hover { background: var(--accent-soft); filter: brightness(1.1); box-shadow: var(--elevation-1); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border: 2px solid var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; box-shadow: var(--elevation-1); }
.btn-sm { padding: 10px 20px; font-size: 13.5px; }

/* ---------- Dev Lifecycle ---------- */
#devlc { flex-direction: column; }
.dlc-toolbar {
  display: flex; align-items: center; gap: 14px; padding: 15px 28px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.dlc-toolbar strong { font-size: 13.5px; font-weight: 800; }
select.field {
  background: transparent; color: #000000; border: 1px solid var(--m3-outline); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13.5px;
}
.release-bar { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.progress-track { width: 160px; height: 6px; background: var(--m3-primary-container); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--success); border-radius: var(--radius-full); transition: width .3s; }
.dlc-body { flex: 1; display: flex; overflow: hidden; }
.kanban-wrapper { flex: 1; overflow-x: auto; padding: 22px; }
.kanban-board-header { padding: 0 2px 14px !important; }
.kanban-title-board { font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 800; }
/* M3 Filled card: tonal surface fill, no border, no resting shadow — shadow
   appears only on hover ("Elevated" state), signaling interactivity. */
.kanban-item { cursor: grab; background: #FFFFFF !important; border: none !important; border-radius: var(--radius) !important; padding: 14px !important; box-shadow: var(--elevation-1) !important; transition: box-shadow .15s, transform .1s !important; }
.kanban-item:hover { background: #FFFFFF !important; box-shadow: var(--elevation-2) !important; transform: translateY(-2px); }
.kanban-item.is-moving { cursor: grabbing; }
.story-id { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 750; }
.story-title { margin: 6px 0 10px; font-size: 14px; line-height: 1.4; color: #000000; font-weight: 700; }
.story-meta { display: flex; justify-content: space-between; align-items: center; }
/* M3 chips are 8px-cornered, NOT full-pill (that's reserved for buttons/nav). */
.chip { font-size: 10.5px; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--m3-outline-variant); color: var(--text-muted); font-weight: 750; }
.chip.bug { color: var(--danger); border-color: transparent; background: var(--danger-soft); }
.chip.feat { color: var(--success); border-color: transparent; background: var(--success-soft); }
.due-chip { font-size: 10.5px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-container-high); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.due-chip.overdue { background: var(--danger-soft); color: var(--danger); }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-gradient); color: var(--on-accent); font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.add-ghost { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 11px; text-align: center; color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 750; margin: 0 10px 10px; transition: border-color .15s, color .15s; }
.add-ghost:hover { border-color: var(--accent); color: var(--accent); }
.sidebar-panel { width: 300px; border-left: 1px solid var(--border); background: var(--surface); padding: 20px; overflow-y: auto; flex-shrink: 0; }
.panel-title { margin-top: 0; font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 800; }
.checkpoint-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.checkpoint-row input { accent-color: var(--success); width: 16px; height: 16px; }
.checkpoint-row.done label { color: var(--text-faint); text-decoration: line-through; }

/* ---------- Messaging ---------- */
#chat { }
.channel-rail { width: 232px; background: var(--surface); border-right: 1px solid var(--border); padding: 16px 0; overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column; }
.rail-head { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.rail-head h4 { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin: 0; font-weight: 800; }
.channel-item { padding: 9px 16px; cursor: pointer; color: var(--text-muted); font-size: 13.5px; border-left: 2.5px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.channel-item .cname { font-weight: 700; }
.channel-item .ctopic { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-item.active { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); }
.channel-item.active .ctopic { color: var(--accent); opacity: .75; }
.channel-item:hover:not(.active) { color: #000000; background: var(--surface-2); }
.chat-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-topbar { padding: 15px 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.chat-topbar .cname { font-weight: 800; font-size: 14.5px; }
.chat-topbar .ctopic { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.message-list { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.message-row { display: flex; gap: 12px; }
.msg-bubble { background: #FFFFFF; border: none; padding: 10px 14px; border-radius: var(--radius); max-width: 70%; box-shadow: var(--elevation-1); }
.msg-author { font-size: 12px; color: #000000; font-weight: 800; margin-bottom: 2px; }
.msg-time { font-size: 11px; color: var(--text-faint); margin-left: 7px; font-weight: 400; }
.msg-text strong { font-weight: 800; }
.composer-bar { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.composer-bar input { flex: 1; background: #FAFAFE; border: 1px solid var(--m3-outline); border-radius: var(--radius-full); padding: 11px 17px; color: #000000; font-size: 13.5px; }
.composer-bar input:focus { outline: none; border: 2px solid var(--m3-primary); padding: 10px 16px; }

/* Quick-chat drawer chrome (right rail -> #chat_drawer). Message content
   inside reuses .message-row/.msg-bubble above, same as the full Messaging view. */
.chat-card { background: var(--surface); }
.chat-header { background: var(--surface-2); }
.chat-title { font-size: 14px; color: #000000; font-weight: 800; }
.chat-subtitle { font-size: 11.5px; }
.chat-body { display: flex; flex-direction: column; gap: 12px; }
.chat-footer { background: var(--surface); }
.chat-footer input.form-control { background: var(--surface-2); border-color: var(--border); color: #000000; }
.chat-footer input.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Documents hub ---------- */
#docs { flex-direction: column; }
.docs-typebar { display: flex; gap: 6px; padding: 13px 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.type-tab { display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--m3-outline-variant); color: var(--text-muted); padding: 8px 15px; border-radius: var(--radius-full); cursor: pointer; font-size: 13px; font-weight: 750; transition: all var(--duration-base) var(--ease-out); }
.type-tab.active { background: var(--m3-primary-container); color: var(--m3-on-primary-container); border-color: transparent; box-shadow: none; }
.type-tab:hover:not(.active) { background: var(--accent-soft); color: #000000; }
.docs-panel { flex: 1; display: none; overflow: hidden; flex-direction: column; }
.docs-panel.active { display: flex; }

.docs-list-view { flex: 1; overflow-y: auto; padding: 26px 30px; display: none; flex-direction: column; }
.docs-list-view.active { display: flex; }
.list-toolbar { display: flex; align-items: center; margin-bottom: 20px; gap: 10px; }
.list-toolbar h2 { font-size: var(--fs-xl); }
.list-toolbar .hint { color: var(--text-muted); font-size: 13px; margin-left: 2px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.doc-card { background: #FFFFFF; border: none; border-radius: var(--radius-lg); padding: 28px; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--elevation-1); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.doc-card:hover { box-shadow: var(--elevation-3); transform: translateY(-4px); }
.doc-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--card-accent, var(--accent)); opacity: .55;
  transition: width var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.doc-card:hover::before { width: 5px; opacity: 1; }
.doc-card[data-kind="story"], .doc-card[data-kind="doc"] { --card-accent: var(--accent); }
.doc-card[data-kind="mail"] { --card-accent: var(--accent-hover); }
.doc-card[data-kind="incident"] { --card-accent: var(--danger); }
.doc-card[data-kind="meeting"], .doc-card[data-kind="channel"] { --card-accent: var(--success); }
.doc-card[data-kind="wiki"], .doc-card[data-kind="automation"] { --card-accent: var(--warn); }
.doc-card.trashed { opacity: .6; }
.doc-card.trashed:hover { opacity: 1; }
.folder-count { font-size: 11px; opacity: .7; }
.doc-card .doc-icon { font-size: 22px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.doc-card .doc-title { font-weight: 800; font-size: var(--fs-md); margin-bottom: 6px; line-height: 1.35; padding-right: 20px; }
.doc-card .doc-meta { font-size: 12px; color: var(--text-faint); }
.card-badges { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-faint); }
.card-badges span { display: inline-flex; align-items: center; gap: 3px; }
.doc-card .doc-del { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.doc-card .doc-del:hover { background: var(--danger-soft); color: var(--danger); }
.doc-empty {
  color: var(--text-muted); font-size: 13.5px; padding: 40px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.doc-empty::before {
  content: ""; width: 120px; height: 105px; margin-bottom: 4px;
  background: url('assets/illustrations/illo-empty.svg') center / contain no-repeat;
}

.docs-editor-view { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.docs-editor-view.active { display: flex; }
.editor-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.editor-title-input { border: none; background: transparent; font-family: var(--font-sans); font-size: 16px; font-weight: 800; color: #000000; padding: 5px 8px; border-radius: var(--radius-sm); min-width: 120px; flex: 1 1 auto; letter-spacing: -.01em; }
.editor-title-input:focus { outline: none; background: var(--surface-2); }
.save-state { font-size: 11.5px; color: var(--text-faint); margin-left: auto; margin-right: 6px; }

/* Word editor */
.wordeditor-toolbar { display: flex; gap: 5px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.wordeditor-toolbar button { background: transparent; border: none; color: #000000; width: 32px; height: 32px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; transition: all .15s; }
.wordeditor-toolbar button:hover { background: var(--accent-soft); color: var(--accent); }
#richtext-active, #wikiRichtext { flex: 1; padding: 34px 48px; outline: none; line-height: 1.75; font-size: 15.5px; overflow-y: auto; max-width: 780px; margin: 0 auto; width: 100%; }
#richtext-active h2, #wikiRichtext h2 { font-size: 21px; }

/* Sheet editor */
.sheet-toolbar { display: flex; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.sheet-scroll { flex: 1; overflow: auto; padding: 20px; }
table.sheet-grid { border-collapse: collapse; background: var(--surface-container-lowest); border-radius: var(--radius); overflow: hidden; box-shadow: none; }
table.sheet-grid th { background: var(--surface-container-highest); color: var(--text-muted); font-size: 11px; font-weight: 800; padding: 8px 5px; border: 1px solid var(--border); min-width: 110px; position: sticky; top: 0; }
table.sheet-grid th.rownum { min-width: 34px; position: sticky; left: 0; z-index: 2; }
table.sheet-grid td.rownum { background: var(--surface-container-highest); color: var(--text-faint); text-align: center; font-size: 11px; border: 1px solid var(--border); position: sticky; left: 0; }
table.sheet-grid td { border: 1px solid var(--border); padding: 0; }
table.sheet-grid input { width: 100%; box-sizing: border-box; border: none; background: transparent; padding: 8px 10px; font-size: 13px; color: #000000; }
table.sheet-grid input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface-container-low); position: relative; z-index: 1; }

/* Slide editor */
.slide-layout { flex: 1; display: flex; overflow: hidden; }
.slide-thumbs { width: 184px; border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.slide-thumb { border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 11px; cursor: pointer; font-size: 11.5px; color: var(--text-muted); transition: all .15s; }
.slide-thumb .stitle { color: #000000; font-weight: 800; font-size: 12.5px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-thumb.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--accent-glow); }
.slide-canvas-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.slide-canvas-toolbar { display: flex; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.slide-canvas { flex: 1; padding: 34px; overflow-y: auto; display: flex; justify-content: center; }
.slide-sheet { width: 100%; max-width: 640px; aspect-ratio: 16/10; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 36px 42px; display: flex; flex-direction: column; height: fit-content; }
.slide-sheet input.stitle-input { border: none; background: transparent; font-family: var(--font-sans); font-size: 23px; font-weight: 800; margin-bottom: 14px; color: #000000; letter-spacing: -.015em; }
.slide-sheet input.stitle-input:focus, .slide-sheet textarea:focus { outline: none; }
.slide-sheet textarea { flex: 1; border: none; background: transparent; resize: none; font-size: 14.5px; line-height: 1.75; color: #000000; font-family: var(--font-sans); }
.present-overlay { position: fixed; inset: 0; background: var(--surface-sunken); z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px; }
.present-overlay.active { display: flex; }
.present-slide { width: min(900px, 90vw); aspect-ratio: 16/10; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 50px 60px; display: flex; flex-direction: column; }
.present-slide h2 { font-size: 30px; }
.present-slide .pbody { white-space: pre-wrap; font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.present-controls { margin-top: 18px; display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 13.5px; }

/* Flow editor */
.flow-list-toolbar { }
.flow-wrap { flex: 1; position: relative; overflow: auto; background-image: radial-gradient(var(--dot-grid-color) 1.5px, transparent 1.5px); background-size: 22px 22px; background-color: var(--surface-sunken); }
.flow-toolbar { position: sticky; top: 14px; left: 14px; display: inline-flex; gap: 8px; z-index: 5; margin: 14px; }
.flow-toolbar button { background: var(--surface-container-lowest); border: none; color: #000000; padding: 8px 14px; border-radius: var(--radius-full); cursor: pointer; font-size: 12.5px; font-weight: 750; box-shadow: var(--elevation-1); }
.flow-toolbar .hint { color: var(--text-muted); font-size: 11.5px; align-self: center; font-weight: 400; }
svg.edges { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
/* Flow nodes deliberately keep a visible outline — they sit on a dotted
   canvas with no container, and M3's shadow-only card language isn't
   legible enough at this size/context without an edge. */
.flow-node { position: absolute; min-width: 132px; padding: 12px 15px; background: var(--surface-container-lowest); border: 1.5px solid var(--m3-primary); border-radius: var(--radius); cursor: move; user-select: none; font-size: 13px; font-weight: 750; box-shadow: var(--elevation-1); }
.flow-node.linking { outline: 2px solid var(--success); outline-offset: 2px; }
.flow-node .del { position: absolute; top: -8px; right: -8px; background: var(--danger); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); }

/* ---------- Summary ---------- */
#summary { flex-direction: column; }
.summary-wrap { flex: 1; overflow-y: auto; padding: 26px 30px; display: flex; flex-direction: column; }
.summary-tabs { display: flex; gap: 5px; margin-right: 10px; }
.summary-tab { background: transparent; border: 1px solid var(--m3-outline-variant); color: var(--text-muted); padding: 6px 15px; border-radius: var(--radius-full); cursor: pointer; font-size: 12.5px; font-weight: 750; transition: all .15s; }
.summary-tab.active { background: var(--m3-primary-container); color: var(--m3-on-primary-container); border-color: transparent; box-shadow: none; }
.summary-tab:hover:not(.active) { background: var(--accent-soft); color: #000000; }

.summary-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.stat-chip {
  display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: none;
  border-radius: var(--radius-lg); padding: 16px 24px 16px 18px; cursor: pointer; box-shadow: var(--elevation-1);
  transition: all var(--duration-base) var(--ease-out);
}
.stat-chip:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }
.stat-chip.active { background: var(--m3-primary-container); box-shadow: none; }
.stat-chip-icon {
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 14.5px; flex-shrink: 0;
}
.stat-chip.active .stat-chip-icon { background: rgba(var(--bs-primary-rgb), .22); color: var(--m3-on-primary-container); }
.stat-chip-count { font-size: 17px; font-weight: 700; color: #000000; letter-spacing: -.01em; }
.stat-chip.active .stat-chip-count { color: var(--m3-on-primary-container); }
.stat-chip-label { font-size: 12.5px; color: var(--text-muted); font-weight: 700; }
.stat-chip.active .stat-chip-label { color: var(--m3-on-primary-container); opacity: .85; }

.activity-feed { display: flex; flex-direction: column; gap: 2px; }
.activity-date-header {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint);
  padding: 22px 16px 8px;
}
.activity-date-header:first-child { padding-top: 4px; }
.activity-row { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; background: #FFFFFF; transition: all var(--duration-base) var(--ease-out); }
.activity-row:hover { background: #FFFFFF; border-color: var(--border); box-shadow: var(--elevation-2); }
.activity-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--card-accent, var(--accent)); opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.activity-row:hover::before { opacity: .7; }
.activity-row[data-kind="incident"] { --card-accent: var(--danger); }
.activity-row[data-kind="meeting"], .activity-row[data-kind="channel"] { --card-accent: var(--success); }
.activity-row[data-kind="wiki"] { --card-accent: var(--warn); }
.activity-row .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.activity-row.is-read .unread-dot { background: transparent; box-shadow: none; }
.activity-row .kind-icon {
  font-size: 14px; flex-shrink: 0; color: var(--accent); background: var(--accent-soft);
  width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.activity-row.is-read .kind-icon { color: var(--text-faint); background: var(--surface-2); }
.activity-row .a-top-line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.activity-row .kind-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--accent);
  background: var(--accent-soft); padding: 2px 9px; border-radius: var(--radius-full);
}
.activity-row.is-read .kind-label { color: var(--text-faint); background: var(--surface-2); }
.activity-row .a-text { font-size: 13.5px; font-weight: 700; color: #000000; line-height: 1.5; }
.activity-row.is-read .a-text { color: var(--text-muted); font-weight: 400; }
.activity-row .a-time { font-size: 11.5px; color: var(--text-faint); }
.activity-row .a-main { flex: 1; min-width: 0; }
.activity-row .read-toggle { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 11.5px; padding: 5px 10px; border-radius: var(--radius-sm); flex-shrink: 0; }
.activity-row .read-toggle:hover { background: var(--surface-2); color: #000000; }

/* ---------- Summary hero + at-a-glance dashboard widgets ---------- */
.summary-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--surface-container-lowest); border-radius: var(--radius-lg);
  padding: 32px 40px; margin-bottom: 20px; box-shadow: var(--elevation-2);
}
.summary-hero-text { flex: 1; min-width: 0; }
.summary-hero-greeting { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-2xl); color: #000000; margin-bottom: 4px; }
.summary-hero-digest { color: var(--text-muted); font-size: 13.5px; margin-bottom: 16px; }
.summary-hero-illo { width: 150px; height: auto; flex-shrink: 0; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.myday-section { margin-bottom: 24px; }
.myday-heading { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.myday-heading i { color: var(--accent); font-size: 14px; }

.myday-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.myday-card {
  display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--elevation-1); border-left: 3px solid var(--accent);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.myday-card:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }
.myday-card.myday-incidents { border-left-color: var(--danger); }
.myday-card.myday-stories { border-left-color: var(--warn); }

.myday-card-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.myday-incidents .myday-card-icon { background: var(--danger-soft); color: var(--danger); }
.myday-stories .myday-card-icon { background: var(--warn-soft); color: var(--warn); }

.myday-card-title { font-size: 15px; font-weight: 800; color: #000000; line-height: 1.35; }
.myday-card-meta { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

.myday-card-items { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.myday-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
  transition: background var(--duration-base); font-size: 12.5px; }
.myday-item:hover { background: var(--surface); }
.myday-item-time { color: var(--text-muted); font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.myday-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000000; font-weight: 600; }
.myday-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex-shrink: 0; box-shadow: 0 0 0 3px var(--danger-soft); }

.myday-sev-chip { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; text-transform: uppercase; }
.myday-sev-chip.sev-sev1 { background: var(--danger-soft); color: var(--danger); }
.myday-sev-chip.sev-sev2 { background: var(--warn-soft); color: var(--warn); }
.myday-sev-chip.sev-sev3, .myday-sev-chip.sev-sev4 { background: var(--surface); color: var(--text-muted); }

.myday-due-chip { font-size: 10.5px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.myday-due-chip.overdue { color: var(--danger); }

.myday-card-cta { margin-top: auto; padding-top: 4px; }
.myday-card-cta .btn-primary, .myday-card-cta .btn-secondary { width: 100%; justify-content: center; }
.myday-card-empty { font-size: 12.5px; color: var(--text-muted); }

.summary-panels-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 24px; }
.summary-panels-row .chart-card h4 { margin-bottom: 10px; }

.week-agenda { display: flex; flex-direction: column; gap: 2px; }
.week-agenda-row { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-radius: 8px; cursor: pointer;
  transition: background var(--duration-base); }
.week-agenda-row:hover { background: var(--surface); }
.week-agenda-date { width: 56px; flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: .3px; }
.week-agenda-info { flex: 1; min-width: 0; }
.week-agenda-title { font-size: 13px; font-weight: 700; color: #000000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-agenda-time { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

@media (max-width: 900px) {
  .myday-row { grid-template-columns: 1fr; }
  .summary-panels-row { grid-template-columns: 1fr; }
  .summary-hero { flex-direction: column; align-items: flex-start; }
  .summary-hero-illo { align-self: center; }
}

/* ---------- Mail ---------- */
#mail { flex-direction: column; }
.mail-reader { flex: 1; overflow-y: auto; padding: 34px 48px; max-width: 740px; margin: 0 auto; width: 100%; }
.mail-reader h2 { font-size: 24px; margin-bottom: 10px; }
.mail-from-line { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.mail-from-line strong { color: #000000; }
.mail-body { font-size: 14.5px; line-height: 1.75; color: #000000; white-space: pre-wrap; }

/* ---------- Analytics ---------- */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.chart-card { background: #FFFFFF; border: none; border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--elevation-1); }
.chart-card h4 { font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; font-family: var(--font-sans); font-weight: 800; }
.chart-card-wide { grid-column: 1 / -1; }

/* ---------- Monitoring ---------- */
.metric-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.metric-tile { background: #FFFFFF; border-radius: var(--radius-lg); padding: 16px 14px; text-align: center; box-shadow: var(--elevation-1); }
.metric-tile-value { font-size: 22px; font-weight: 700; color: #000000; letter-spacing: -.01em; }
.metric-tile-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.threshold-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.threshold-row .status-chip { font-size: 11px; padding: 5px 12px; }
.request-list { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; }
.request-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 12.5px; }
.request-row:hover { background: var(--surface-container); }
.request-status { font-family: var(--font-mono); font-size: 11px; font-weight: 700; width: 34px; flex-shrink: 0; }
.request-status.ok { color: var(--success); }
.request-status.warn { color: var(--warn); }
.request-status.err { color: var(--danger); }
.request-method { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); width: 40px; flex-shrink: 0; }
.request-path { flex: 1; color: #000000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-ms { color: var(--text-muted); font-size: 11.5px; flex-shrink: 0; }
.request-time { color: var(--text-faint); font-size: 11px; flex-shrink: 0; width: 60px; text-align: right; }

/* ---------- Meetings ---------- */
#meetings { flex-direction: column; }
.status-chip { font-size: 10.5px; padding: 3px 10px; border-radius: var(--radius-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .3px; background: var(--surface-container-high); color: var(--text-muted); border: 1px solid var(--m3-outline-variant); }
.status-chip.scheduled { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.status-chip.live { color: var(--success); background: var(--success-soft); border-color: transparent; }
.status-chip.ended { color: var(--text-faint); }
.doc-card.meeting-card .doc-meta .status-chip { margin-right: 6px; }
.meeting-body { flex: 1; display: flex; gap: 30px; padding: 28px 32px; overflow-y: auto; }

/* Card / List / Calendar view switcher */
.meeting-view-pane { display: none; }
.meeting-view-pane.active { display: block; }
.meeting-list-table { display: flex; flex-direction: column; gap: 8px; }
.meeting-list-row {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #FFFFFF;
  border: none; border-radius: var(--radius); cursor: pointer; box-shadow: var(--elevation-1);
  transition: all .15s;
}
.meeting-list-row:hover { box-shadow: var(--elevation-1); transform: translateY(-1px); }
.meeting-list-title { font-weight: 750; font-size: 13.5px; color: #000000; flex: 1; }
.meeting-list-when { font-size: 12.5px; color: var(--text-muted); }
.meeting-list-attendees { font-size: 12.5px; color: var(--text-faint); display: flex; align-items: center; gap: 5px; }

/* FullCalendar: adapt to the M3 tokens */
#meetingCalendar { background: var(--surface-container); border: none; border-radius: var(--radius-lg); padding: 18px; box-shadow: none; }
#meetingCalendar .fc { font-family: var(--font-sans); color: #000000; }
#meetingCalendar .fc-toolbar-title { font-size: 16px; font-weight: 800; color: #000000; }
#meetingCalendar .fc-button { background: var(--surface-container-high) !important; border: none !important; color: var(--text) !important; box-shadow: none !important; text-transform: capitalize; font-weight: 750; font-size: 12.5px !important; border-radius: var(--radius-full) !important; }
#meetingCalendar .fc-button:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
#meetingCalendar .fc-button-active, #meetingCalendar .fc-button-primary:not(:disabled).fc-button-active { background: var(--m3-primary-container) !important; border-color: transparent !important; color: var(--m3-on-primary-container) !important; }
#meetingCalendar .fc-daygrid-day-number, #meetingCalendar .fc-col-header-cell-cushion { color: var(--text-muted); }
#meetingCalendar .fc-day-today { background: var(--accent-soft) !important; }
#meetingCalendar .fc-theme-standard td, #meetingCalendar .fc-theme-standard th, #meetingCalendar .fc-theme-standard .fc-scrollgrid { border-color: var(--border) !important; }
#meetingCalendar .fc-event { border-radius: var(--radius-sm); cursor: pointer; font-size: 11.5px; padding: 1px 4px; }

/* ---------- Incident Management ---------- */
#incidents { flex-direction: column; }
.status-chip.open { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.status-chip.investigating { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.status-chip.resolved { color: var(--success); background: var(--success-soft); border-color: transparent; }
.sev-chip { font-size: 10.5px; padding: 3px 10px; border-radius: var(--radius-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .3px; background: var(--surface-container-high); color: var(--text-muted); border: 1px solid var(--m3-outline-variant); margin-right: 6px; }
.sev-chip.low { color: var(--text-muted); }
.sev-chip.medium { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.sev-chip.high { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.sev-chip.critical { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.meeting-col { flex: 1; min-width: 260px; display: flex; flex-direction: column; }
.form-label { font-size: 11.5px; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 7px; }
.form-label:first-child { margin-top: 0; }
/* M3 Outlined text field: transparent fill, thin outline, thickens +
   recolors to primary on focus (padding compensates so layout doesn't shift). */
.form-input, .form-textarea { width: 100%; border: 1px solid var(--m3-outline); background: #FAFAFE; border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13.5px; color: #000000; transition: border-color .15s; }
.form-input:focus, .form-textarea:focus { outline: none; border: 2px solid var(--m3-primary); padding: 9px 12px; }
.form-textarea { resize: vertical; line-height: 1.6; font-family: var(--font-sans); flex: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.attendee-chip { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--m3-outline-variant); border-radius: var(--radius-sm); padding: 4px 6px 4px 13px; font-size: 13px; }
.attendee-chip button { border: none; background: transparent; color: var(--text-faint); cursor: pointer; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.attendee-chip button:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- Modal ---------- */
/* z-index above Bootstrap's offcanvas (1045) and its backdrop (1040), so the
   command palette / other custom modals stay clickable when opened from
   inside the record/version drawers (e.g. the "+ Link" picker). */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1060; }
/* M3 Dialog: surface-container-high, extra-large (28px) corners, elevation 3. */
.modal-box { background: var(--surface-container-high); border-radius: var(--radius-xl); box-shadow: var(--elevation-3); width: 420px; max-width: 90vw; padding: 28px; border: none; }
.modal-box h3 { font-size: 17px; margin-bottom: 16px; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 750; margin-bottom: 6px; }
.modal-field input, .modal-field textarea { width: 100%; border: 1px solid var(--m3-outline); background: #FAFAFE; border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13.5px; color: #000000; transition: border-color .15s; }
.modal-field input:focus, .modal-field textarea:focus { outline: none; border: 2px solid var(--m3-primary); padding: 9px 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-msg { font-size: 13.5px; color: #000000; line-height: 1.55; margin-bottom: 4px; }

/* ---------- Mentions (chat + comments) ---------- */
.mention { color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 0 4px; font-weight: 750; }

/* ---------- Notification bell dropdown ---------- */
.notification-panel { width: 360px; max-height: 480px; overflow-y: auto; padding: 6px; border: none; box-shadow: var(--elevation-3); border-radius: var(--radius-lg); background: var(--surface-container-high); }
.notification-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }

/* ---------- Command palette (Ctrl/Cmd+K) ---------- */
.palette-box { width: 560px; max-width: 92vw; padding: 0; overflow: hidden; background: var(--surface-container-high); }
.palette-input { border: none; border-bottom: 1px solid var(--m3-outline-variant); border-radius: 0; padding: 18px 22px; font-size: 15.5px; background: transparent; }
.palette-input:focus { box-shadow: none; border-color: var(--m3-outline-variant); }
.palette-results { max-height: 380px; overflow-y: auto; padding: 8px; }
.palette-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; }
.palette-row i { color: var(--accent); width: 18px; text-align: center; flex-shrink: 0; }
.palette-row.active, .palette-row:hover { background: var(--accent-soft); }
.palette-title { flex: 1; color: #000000; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-kind { font-size: 11px; color: var(--text-faint); font-weight: 750; text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; }

/* ---------- Automations ---------- */
.automation-card { display: flex; flex-direction: column; }
.automation-card .doc-meta code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; }
.automation-toggle { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); margin-top: 12px; cursor: pointer; }
.automation-toggle input { accent-color: var(--success); }
.automation-form-box { width: 460px; }
.af-condition-row .hint { margin: 0; }

/* ---------- Story detail modal (Dev Lifecycle) ---------- */
.story-detail-box { width: 460px; max-height: 86vh; overflow-y: auto; }
.checkpoint-row { flex-wrap: wrap; }
.checkpoint-story { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: var(--radius-sm); cursor: pointer; margin-left: 4px; }
.checkpoint-story.is-done { color: var(--success); background: var(--success-soft); }
.checkpoint-story.is-pending { color: var(--warn); background: var(--warn-soft); }
.checkpoint-link-btn { width: 26px; height: 26px; margin-left: auto; flex-shrink: 0; }

/* ---------- Links & comments drawer (shared across every record type) ---------- */
.record-tabs { display: flex; border-bottom: 1px solid var(--border); }
.record-tab { flex: 1; background: transparent; border: none; padding: 13px; font-size: 13px; font-weight: 800; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.record-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.record-pane { display: none; }
.record-pane.active { display: block; }
.linked-chip { margin-bottom: 8px; }
.link-remove { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; margin-left: 4px; cursor: pointer; color: var(--text-faint); }
.link-remove:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- Version history drawer ---------- */
.version-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.version-time { color: var(--text-muted); }
.version-delta { font-size: 11px; font-weight: 750; }
.version-delta.plus { color: var(--success); }
.version-delta.minus { color: var(--danger); }

/* ---------- Approvals ---------- */
.appr-chip { font-size: 10.5px; padding: 3px 10px; border-radius: var(--radius-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.appr-chip.pending { color: var(--warn); background: var(--warn-soft); }
.appr-chip.approved { color: var(--success); background: var(--success-soft); }
.appr-chip.rejected { color: var(--danger); background: var(--danger-soft); }

/* ---------- My Work ---------- */
.mywork-section { margin-bottom: 26px; }
.mywork-section h3 { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 800; margin-bottom: 12px; }
.mywork-row .doc-title { padding-right: 0; }

/* ---------- Reminders ---------- */
.reminder-groups { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.reminder-group-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
.reminder-group[data-group="overdue"] .reminder-group-title { color: var(--danger); }
.reminder-group-count { background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 10px; }
.reminder-group[data-group="overdue"] .reminder-group-count { background: var(--danger-soft); color: var(--danger); }

.reminder-rows { display: flex; flex-direction: column; background: #FFFFFF; border-radius: var(--radius-lg); box-shadow: var(--elevation-1); overflow: hidden; }
.reminder-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background var(--duration-base); }
.reminder-row:last-child { border-bottom: none; }
.reminder-row:hover { background: var(--surface); }
.reminder-row:hover .reminder-delete { opacity: 1; }

.reminder-check { width: 22px; height: 22px; border: none; background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; transition: color var(--duration-base); }
.reminder-check:hover { color: var(--accent); }
.reminder-check.checked { color: var(--success); }

.reminder-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #000000; cursor: text; padding: 2px 4px; border-radius: 4px; }
.reminder-text:hover { background: var(--surface-2); }
.reminder-row.done .reminder-text { color: var(--text-faint); text-decoration: line-through; }
.reminder-text-input { flex: 1; min-width: 0; font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--m3-primary);
  border-radius: 4px; padding: 2px 4px; color: #000; outline: none; }

.reminder-due { font-size: 11.5px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.reminder-due.overdue { color: var(--danger); }

.reminder-flag { width: 22px; height: 22px; border: none; background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; transition: color var(--duration-base); }
.reminder-flag:hover { color: var(--warn); }
.reminder-flag.active { color: var(--warn); }

.reminder-delete { width: 22px; height: 22px; border: none; background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; opacity: 0; border-radius: 4px;
  transition: all var(--duration-base); }
.reminder-delete:hover { color: var(--danger); background: var(--danger-soft); }

/* ---------- Videos (Two Column - Player Left, List Right) ---------- */
#videos { flex-direction: column; background: #FFFFFF; }

/* ---------- Videos — YouTube-style browse -> watch flow ---------- */
#videos { flex-direction: column; }

/* Browse state (default on opening the page) — full-page grid of every video */
.video-browse-view {
  height: 100%; overflow-y: auto; background: #FFFFFF; padding: 24px 28px; }

.video-browse-header { margin-bottom: 20px; }
.video-browse-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 14px; flex-wrap: wrap; }
.video-browse-title-row h2 {
  margin: 0; font-size: 21px; font-weight: 900; color: #000000; letter-spacing: -0.4px; }

.video-browse-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px 18px;
  align-items: start; }

.video-browse-card { cursor: pointer; align-self: start; height: fit-content; }
.video-browse-thumb {
  width: 100%; aspect-ratio: 16/9; border-radius: 12px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 10px;
  transition: transform 0.2s; }
.video-browse-card:hover .video-browse-thumb { transform: scale(1.02); }
.video-browse-thumb .play-overlay {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; font-size: 18px; backdrop-filter: blur(2px); }
.video-browse-duration {
  position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.75); color: white;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }

.video-browse-card-body { display: flex; gap: 10px; align-items: flex-start; }
.video-browse-avatar {
  width: 36px; height: 36px; min-height: 36px; border-radius: 50%; color: white; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.video-browse-card-info { flex: 1; min-width: 0; align-self: flex-start; }
.video-browse-card-title {
  font-size: 13.5px; font-weight: 700; color: #000; line-height: 1.35; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-browse-card-channel { font-size: 12px; color: #666; font-weight: 600; }
.video-browse-card-meta { font-size: 11.5px; color: #999; font-weight: 600; margin-top: 1px; }
.video-browse-card-meta .cat-chip {
  display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 6px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.video-browse-card-meta .cat-chip.kt { background: #E8FBF5; color: #059669; }

/* Watch state — opened by clicking a video. List on the left, player on the right. */
.video-watch-view { display: flex; height: 100%; background: #FFFFFF; }

.video-watch-list-panel {
  width: 360px; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid #E1DDF2;
  display: flex; flex-direction: column; box-shadow: 2px 0 8px rgba(0,0,0,.04); }
.video-watch-back-btn {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: none;
  background: transparent; color: #7C5CFF; font-size: 13px; font-weight: 700; cursor: pointer;
  border-bottom: 1px solid #E1DDF2; text-align: left; width: 100%; }
.video-watch-back-btn:hover { background: #F5F3F9; }

.video-watch-player-panel {
  flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; }

.video-player-large {
  width: 100%; aspect-ratio: 16/9; background: #0D0B14;
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; position: relative; overflow: hidden;
  margin-bottom: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }

/* Scoped to .video-player-large — a bare .video-placeholder rule would collide
   with the (differently-sized) one the Meeting Room video tiles also use,
   defined later in this file, silently shrinking this icon via the cascade. */
.video-player-large .video-placeholder {
  text-align: center; color: #FFFFFF; cursor: pointer; transition: transform 0.2s; }
.video-player-large .video-placeholder:hover { transform: scale(1.06); }
.video-player-large .video-placeholder i {
  font-size: 72px; opacity: 0.85; display: block; }
.video-player-large.is-playing .video-placeholder i {
  animation: video-playing-pulse 1.8s ease-in-out infinite; }

@keyframes video-playing-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.94); }
}

.video-player-controls {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.75) 100%);
  display: flex; align-items: center; gap: 10px; }
.video-player-controls-btn {
  width: 30px; height: 30px; border: none; background: transparent; color: white;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px; border-radius: 6px; flex-shrink: 0; transition: background 0.2s; }
.video-player-controls-btn:hover { background: rgba(255,255,255,.15); }
.video-player-progress-track {
  flex: 1; height: 5px; background: rgba(255,255,255,.25); border-radius: 999px;
  cursor: pointer; overflow: hidden; }
.video-player-progress-fill {
  height: 100%; width: 35%; background: #7C5CFF; border-radius: 999px; }
.video-player-time {
  color: rgba(255,255,255,.85); font-size: 11px; font-weight: 700; flex-shrink: 0;
  min-width: 84px; text-align: center; }

.video-details {
  flex: 1; }

#videoTitleMain {
  margin: 0 0 12px 0; font-size: 22px; font-weight: 900; color: #000000;
  letter-spacing: -0.5px; }

.video-details-meta {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.video-details-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #666;
  font-weight: 700; background: #F5F3F9; padding: 5px 12px; border-radius: 999px; }
.video-details-chip i { font-size: 12px; opacity: 0.7; }
.video-details-chip.category.kt { color: white; background: #059669; }

/* Uploader row — avatar, name, follow */
.video-author-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid #F1EEFA; border-bottom: 1px solid #F1EEFA; margin-bottom: 18px; }
.video-author-avatar {
  width: 42px; height: 42px; border-radius: 50%; color: white; font-weight: 800;
  font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.video-author-info { flex: 1; min-width: 0; }
.video-author-name { font-size: 13.5px; font-weight: 800; color: #000; }
.video-author-label { font-size: 11px; color: #999; font-weight: 600; margin-top: 1px; }
.video-follow-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #7C5CFF; background: white;
  color: #7C5CFF; font-size: 12px; font-weight: 700; cursor: pointer; display: flex;
  align-items: center; gap: 6px; transition: all 0.2s; flex-shrink: 0; }
.video-follow-btn:hover { background: #F0EBF9; }
.video-follow-btn.following { background: #7C5CFF; color: white; }
.video-follow-btn.following:hover { background: #6B47E0; }

/* Like / Share / Save / Download */
.video-action-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.video-action-pill {
  display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid #E1DDF2; background: white; color: #555; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; }
.video-action-pill:hover { border-color: #7C5CFF; color: #7C5CFF; background: #F5F3F9; }
.video-action-pill.liked { background: #EEF2FF; border-color: #7C5CFF; color: #7C5CFF; }
.video-action-pill.saved { background: #FFF8E8; border-color: #FFB03A; color: #E09400; }

.video-description-card {
  background: #FAFAFC; border: 1px solid #E1DDF2; border-radius: 10px; padding: 16px; }
#videoDescriptionMain {
  font-size: 13.5px; color: #444; line-height: 1.7; margin: 0; }

.video-list-filters {
  display: flex; gap: 6px; }
.video-list-filter {
  flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid #DDD;
  background: transparent; color: #666; cursor: pointer; font-size: 11px;
  font-weight: 700; transition: all 0.2s; }
.video-list-filter:hover {
  background: rgba(124, 92, 255, 0.08); border-color: #7C5CFF; color: #7C5CFF; }
.video-list-filter.active {
  background: #7C5CFF; color: white; border-color: #7C5CFF;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.25); }

.video-search-box {
  padding: 12px 16px; border-bottom: 1px solid #E1DDF2; display: flex; gap: 8px;
  align-items: center; position: relative; }
.video-search-box i {
  position: absolute; left: 27px; top: 50%; transform: translateY(-50%); color: #AAA; font-size: 12px; }
.video-search-field {
  flex: 1; padding: 9px 12px 9px 30px; border-radius: 6px; border: 1px solid #DDD;
  background: #F7F6F8; color: #000000; font-size: 12px; font-weight: 500;
  font-family: inherit; transition: all 0.2s; min-width: 0; }
.video-search-field:focus {
  outline: none; border-color: #7C5CFF; background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.1); }
.video-search-field::placeholder { color: #AAA; }
.video-sort-select {
  border: 1px solid #DDD; border-radius: 6px; padding: 8px 8px; font-size: 11px;
  font-weight: 700; color: #666; background: white; outline: none; flex-shrink: 0; }
.video-sort-select:focus { border-color: #7C5CFF; }

.video-list-items {
  flex: 1; overflow-y: auto; }
.video-list-empty { padding: 40px 20px; text-align: center; color: #AAA; font-size: 12.5px; font-weight: 600; }

.video-list-item {
  cursor: pointer; transition: all 0.2s; position: relative; }

/* Shared thumbnail — sizing is set per view mode below */
.video-list-item-thumbnail {
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px; flex-shrink: 0; position: relative; overflow: hidden; }
.video-list-item-thumbnail .play-overlay {
  width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  backdrop-filter: blur(2px); }
.video-list-item-duration {
  position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,.72); color: white;
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

.video-list-item-category {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 999px; flex-shrink: 0; }
.video-list-item-category.kt { background: #E8FBF5; color: #059669; }

/* Detailed view (default) — single column, larger thumbnail, description + author visible */
.video-list-items.detailed-view {
  display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.video-list-items.detailed-view .video-list-item {
  height: 94px; padding: 12px; border-radius: 12px; display: flex; gap: 14px;
  align-items: stretch; background: transparent; overflow: hidden; box-sizing: border-box; }
.video-list-items.detailed-view .video-list-item::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: transparent; transition: background 0.2s; }
.video-list-items.detailed-view .video-list-item:hover { background: #F5F3F9; }
.video-list-items.detailed-view .video-list-item.active { background: #F0EBF9; }
.video-list-items.detailed-view .video-list-item.active::before { background: #7C5CFF; }

.video-list-items.detailed-view .video-list-item-thumbnail { width: 116px; height: 70px; }

.video-list-items.detailed-view .video-list-item-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.video-list-items.detailed-view .video-list-item-title {
  font-size: 13px; font-weight: 700; color: #000000; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-list-items.detailed-view .video-list-item.active .video-list-item-title { color: #7C5CFF; }
.video-list-items.detailed-view .video-list-item-author {
  font-size: 11px; color: #7C5CFF; font-weight: 700; }
.video-list-items.detailed-view .video-list-item-desc {
  font-size: 11px; color: #999; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.video-list-items.detailed-view .video-list-item-meta {
  display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #999; font-weight: 600; margin-top: 1px; }


/* (dead .video-layout / .video-card / .video-player-modal system removed —
   was never referenced by any HTML or JS and duplicated .video-list-item
   under different rules than the live browse/watch system above,
   which silently corrupted the real video list's styling via cascade.) */

/* ---------- Settings, Profile, Preferences Pages ---------- */
#settings, #profile, #preferences { flex-direction: column; }
.settings-container { display: flex; gap: 24px; max-width: 1200px; }
.settings-sidebar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.settings-tab { background: transparent; border: none; color: var(--text-muted); padding: 12px 16px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 10px; transition: all var(--duration-base) var(--ease-out); }
.settings-tab:hover { background: var(--accent-soft); color: var(--accent); }
.settings-tab.active { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.settings-content { flex: 1; min-width: 0; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-panel h3 { font-size: 18px; font-weight: 800; color: #000000; margin-bottom: 24px; }
.settings-group { margin-bottom: 28px; }
.settings-label { display: block; font-size: 14px; font-weight: 700; color: #000000; margin-bottom: 8px; }
.settings-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.settings-toggle-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0;
  border-bottom: 1px solid var(--border); }
.gwcfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.gwcfg-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .3px; }
.gwcfg-row { display: flex; align-items: center; gap: 8px; }
.gwcfg-row .form-input { flex: 1; min-width: 0; }
.gwcfg-status { width: 18px; flex-shrink: 0; text-align: center; font-size: 14px; }

/* Traffic section: flow diagram (with its own stat row) on the left half,
   the per-service breakdown list on the right half. */
.gw-traffic-columns { display: flex; gap: 28px; align-items: flex-start; }
.gw-traffic-col { flex: 1 1 50%; min-width: 0; }

.gw-traffic-stats { display: flex; gap: 28px; margin: 4px 0 18px; flex-wrap: wrap; }
.gw-traffic-stat-value { font-size: 22px; font-weight: 800; color: #000; }
.gw-traffic-stat-value.danger { color: var(--danger); }
.gw-traffic-stat-label { font-size: 10.5px; color: #999; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

/* Animated request-flow diagram: Client -> Gateway -> each backend, with a
   pulse traveling along active lines (speed scales with that line's share
   of traffic; idle lines show no pulse at all). */
.gw-flow { display: flex; align-items: center; gap: 4px; margin: 4px 0 22px; max-width: 100%; overflow: hidden; }
.gw-flow-node { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 82px; height: 56px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-container-lowest); text-align: center; flex-shrink: 0; }
.gw-flow-node.gw-flow-gateway { background: var(--surface-container); border-color: var(--accent); }
.gw-flow-node i { font-size: 15px; color: var(--text-muted); }
.gw-flow-node.gw-flow-gateway i { color: var(--accent); }
.gw-flow-node-label { font-size: 11.5px; font-weight: 800; line-height: 1.15; }
.gw-flow-node-sub { font-size: 10px; color: var(--text-muted); font-weight: 700; }

.gw-flow-line { position: relative; height: 2px; background: var(--border); flex: 1; min-width: 18px; overflow: visible; }
.gw-flow-dot { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gw-dot-color, var(--accent)); transform: translate(-50%, -50%); opacity: 0;
  animation: gw-flow-pulse 1.6s linear infinite; }
@keyframes gw-flow-pulse {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-flow-dot { animation: none; opacity: 0.9; left: 50%; }
}

/* Each branch reads left -> right: the animated line, then the destination
   node (colored per service — identity, never status; see gw-flow-node-icon
   below), then the request count in its own right-aligned column. */
.gw-flow-branches { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.gw-flow-branch { display: flex; align-items: center; gap: 6px; height: 40px; }
.gw-flow-branch.idle .gw-flow-line { opacity: 0.4; }
.gw-flow-branch-node { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-container-lowest); flex-shrink: 1; }
.gw-flow-branch.idle .gw-flow-branch-node { opacity: 0.55; }
.gw-flow-node-icon { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 11px;
  background: var(--gw-svc-tint, var(--accent-soft)); color: var(--gw-svc-color, var(--accent)); }
.gw-flow-branch-node .gw-flow-node-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-flow-count { min-width: 42px; text-align: right; flex-shrink: 0; }
.gw-flow-count-value { display: block; font-size: 13.5px; font-weight: 800; color: #000; }
.gw-flow-count-pct { display: block; font-size: 10px; color: var(--text-muted); font-weight: 700; }
.gwtraffic-list-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 12.5px; }
.gwtraffic-list-row:hover { background: var(--surface-container); }
.gwtraffic-list-label { font-weight: 700; min-width: 120px; }
.gwtraffic-list-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-container); overflow: hidden; }
.gwtraffic-list-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.gwtraffic-list-count { font-weight: 800; min-width: 34px; text-align: right; }
.gwtraffic-list-meta { color: var(--text-muted); font-size: 11px; min-width: 140px; text-align: right; }

.gw-route-row { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid #F1EEFA; }
.gw-route-row:last-child { border-bottom: none; }
.gw-route-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 13px; background: var(--accent-soft); color: var(--accent); }
.gw-route-body { flex: 1; min-width: 0; }
.gw-route-name { font-size: 12.5px; font-weight: 700; color: #000; margin-bottom: 3px; }
.gw-route-paths { display: flex; flex-wrap: wrap; gap: 6px; }
.gw-route-paths code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono);
  font-size: 11px; color: var(--text-muted); }
.gw-route-target { font-size: 11.5px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.settings-checkbox { width: 44px; height: 28px; appearance: none; background: var(--m3-outline-variant);
  border-radius: 14px; cursor: pointer; position: relative; transition: background var(--duration-base); }
.settings-checkbox:checked { background: var(--m3-primary); }
.theme-swatches { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.theme-swatches li { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  transition: all var(--duration-base); }
.theme-swatches li:hover { transform: scale(1.1); }
.theme-swatches li.active { border-color: #000000; box-shadow: 0 0 0 2px var(--surface); }

/* Profile Page */
.profile-container { max-width: 980px; }
.profile-columns { display: flex; align-items: flex-start; gap: 18px; }
.profile-main { flex: 1 1 560px; min-width: 0; }
.profile-side { flex: 0 0 320px; max-width: 100%; }
@media (max-width: 960px) {
  .profile-columns { flex-direction: column; }
  .profile-side { flex-basis: auto; width: 100%; }
}
.profile-section { background: var(--surface-container-lowest); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm), var(--elevation-1); border: 1px solid var(--border); }
.profile-section h4 { margin: 0 0 12px; font-size: 10px; font-weight: 800; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .08em; }
.profile-field { margin-bottom: 14px; }
.profile-field:last-child { margin-bottom: 0; }
.profile-field label { display: block; font-size: 9.5px; font-weight: 800; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.profile-field input, .profile-field textarea { width: 100%; }
.profile-actions { display: flex; gap: 10px; margin-top: 2px; }

/* Hero identity card — replaces the old flat gradient banner */
.profile-hero { display: flex; align-items: center; gap: 14px; }
.profile-hero-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--accent-gradient);
  color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; font-family: var(--font-heading); box-shadow: 0 8px 18px -10px var(--accent-soft-strong);
}
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: #000000; }
.profile-hero-title { color: var(--text-muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.profile-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profile-chip {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 4px 9px;
  border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--text-muted);
}

/* Reporting line — manager -> you -> direct reports, as connected pills */
.profile-reportline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-pill { display: flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 5px 11px 5px 5px; }
.profile-pill.me { background: var(--accent-soft); border-color: transparent; }
.profile-pill-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-gradient); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  font-family: var(--font-heading); flex-shrink: 0;
}
.profile-pill-name { font-size: 11.5px; font-weight: 700; color: #000000; }
.profile-pill-role { font-size: 9.5px; color: var(--text-muted); }
.profile-pill-arrow { color: var(--text-faint); font-size: 14px; }
.profile-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }

/* Account info — 2-col grid; static facts (Role/Joined) are plain text, not disabled-look inputs */
.profile-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.profile-info-grid .profile-field.full { grid-column: 1 / -1; }
.profile-static-value { font-size: 12.5px; font-weight: 700; color: #000000; padding: 7px 0; }
@media (max-width: 560px) { .profile-info-grid { grid-template-columns: 1fr; } }

.org-tier-badge {
  display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; padding: 3px 8px;
  border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .3px; width: fit-content;
  background: var(--surface-container-high); color: var(--text-muted);
}
.org-tier-badge.org-tier-executive { background: var(--danger-soft); color: var(--danger); }
.org-tier-badge.org-tier-director { background: var(--warn-soft); color: var(--warn); }
.org-tier-badge.org-tier-manager { background: var(--accent-soft); color: var(--accent); }
.org-tier-badge.org-tier-lead { background: var(--success-soft); color: var(--success); }
.org-tier-badge.org-tier-ic { background: var(--surface-container-high); color: var(--text-muted); }

/* Org chart — indented tree, not a boxes+connector-lines graphic (see plan) */
.org-tree { display: flex; flex-direction: column; gap: 8px; }
.org-node-card {
  display: flex; align-items: center; gap: 10px; background: var(--surface-container-lowest);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; max-width: 400px;
}
.org-node-card.me { border-color: var(--accent); background: var(--accent-soft); }
.org-node-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent-gradient); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0;
}
.org-node-info { flex: 1; min-width: 0; }
.org-node-name { font-size: 12.5px; font-weight: 800; color: #000000; }
.org-node-title { font-size: 10.5px; color: var(--text-muted); }
.org-node-children {
  margin: 8px 0 0 15px; padding-left: 20px; border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}

/* Preferences Page */
.preferences-container { max-width: 800px; }
.preferences-section { background: #FFFFFF; border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px;
  box-shadow: var(--elevation-1); }
.preferences-section h4 { margin: 0 0 24px; font-size: 16px; font-weight: 800; color: #000000;
  display: flex; align-items: center; gap: 10px; }
.preferences-section h4 i { font-size: 20px; color: var(--m3-primary); }
.preferences-field { margin-bottom: 24px; }
.preferences-field:last-child { margin-bottom: 0; }
.preferences-label { display: block; font-size: 14px; font-weight: 800; color: #000000; margin-bottom: 8px; }
.preferences-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.preferences-toggle { display: flex; align-items: center; justify-content: space-between; padding: 16px 0;
  border-bottom: 1px solid var(--border); }
.preferences-toggle:last-child { border-bottom: none; }
.preferences-actions { display: flex; gap: 12px; margin-top: 28px; }

/* ---------- Professional Email Interface ---------- */
#mail { flex-direction: column; }
.mail-layout { display: flex; height: 100%; gap: 0; }
.mail-sidebar { width: 260px; background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFE 100%); border-right: 1px solid var(--border);
  padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.mail-compose-btn { background: var(--m3-primary); color: white; border: none; border-radius: var(--radius-lg);
  padding: 11px 20px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 14px; box-shadow: var(--elevation-2); transition: all var(--duration-base) var(--ease-out); }
.mail-compose-btn:hover { box-shadow: var(--elevation-3); transform: translateY(-2px); }
.mail-compose-btn i { font-size: 18px; }

.mail-nav { display: flex; flex-direction: column; gap: 8px; }
.mail-nav-section { display: flex; flex-direction: column; gap: 4px; }
.mail-nav-divider { height: 1px; background: var(--border); margin: 8px 0; }
.mail-nav-item { background: transparent; border: none; color: var(--text-muted); padding: 9px 12px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 700; display: flex;
  align-items: center; gap: 12px; transition: all var(--duration-base) var(--ease-out); position: relative; }
.mail-nav-item:hover { background: var(--accent-soft); color: var(--accent); }
.mail-nav-item.active { background: var(--m3-primary-container); color: var(--m3-on-primary-container); font-weight: 800; }
.mail-nav-item i { font-size: 18px; min-width: 20px; }
.mail-badge { margin-left: auto; background: var(--danger); color: white; font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 12px; min-width: 20px; text-align: center; }

.mail-content { flex: 1; display: flex; flex-direction: column; background: #FFFFFF; overflow: hidden; }
.mail-list-container, .mail-detail-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.mail-header { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: #FFFFFF; }
.mail-search-bar { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 14px; }
.mail-search-bar i { color: var(--text-muted); font-size: 16px; }
.mail-search-bar input { border: none; background: transparent; width: 100%; color: #000000; font-size: 14px; }
.mail-search-bar input::placeholder { color: var(--text-muted); }
.mail-search-bar input:focus { outline: none; }
.mail-header-actions { display: flex; gap: 8px; }
.mail-header-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: none; background: var(--surface);
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-base); }
.mail-header-btn:hover { background: var(--accent-soft); color: var(--accent); }

.mail-list { flex: 1; overflow-y: auto; }
.mail-email-item { display: flex; align-items: center; gap: 14px; padding: 9px 20px; border-bottom: 1px solid var(--border);
  cursor: pointer; background: #FFFFFF; transition: all var(--duration-base); }
.mail-email-item:hover { background: var(--surface); box-shadow: inset 0 1px 0 rgba(0,0,0,0.02); }
.mail-email-item.unread { background: var(--accent-soft); }
.mail-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--m3-primary); }
.mail-star-btn { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer;
  transition: color var(--duration-base); }
.mail-star-btn.starred { color: var(--warn); }
.mail-email-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mail-email-from { font-weight: 750; color: #000000; font-size: 14px; }
.mail-email-subject { color: #000000; font-weight: 750; font-size: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.mail-email-snippet { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-email-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; min-width: 60px;
  text-align: right; }

.mail-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px;
  border-bottom: 1px solid var(--border); background: #FFFFFF; }
.mail-back-btn { background: none; border: none; color: #000000; cursor: pointer; font-size: 14px; font-weight: 750;
  display: flex; align-items: center; gap: 6px; transition: color var(--duration-base); }
.mail-back-btn:hover { color: var(--accent); }
.mail-detail-toolbar { display: flex; gap: 8px; }
.mail-toolbar-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: none; background: var(--surface);
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all var(--duration-base); }
.mail-toolbar-btn:hover { background: var(--accent-soft); color: var(--accent); }

.mail-detail-content { flex: 1; overflow-y: auto; padding: 18px 20px; max-width: 800px; margin: 0 auto; width: 100%; }
.mail-message { background: #FFFFFF; border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--border); }
.mail-message-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.mail-subject { margin: 0 0 16px; font-size: 22px; font-weight: 800; color: #000000; line-height: 1.4; }
.mail-message-meta { display: flex; align-items: center; justify-content: space-between; }
.mail-sender-info { display: flex; align-items: center; gap: 12px; }
.mail-sender-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; flex-shrink: 0; }
.mail-sender-name { font-weight: 700; color: #000000; font-size: 14px; }
.mail-sender-time { font-size: 12px; color: var(--text-muted); }
.mail-message-body { font-size: 14px; line-height: 1.8; color: #000000; white-space: pre-wrap; word-wrap: break-word;
  margin: 18px 0; }
.mail-actions-bar { display: flex; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Mail Compose — right-side drawer with full-screen toggle */
.mail-compose-drawer {
  position: fixed; inset: 0; z-index: 1055; pointer-events: none; }
.mail-compose-drawer.open { pointer-events: auto; }

.mail-compose-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(20, 15, 40, 0.18);
  opacity: 0; transition: opacity 0.25s ease; }
.mail-compose-drawer.open .mail-compose-drawer-backdrop { opacity: 1; }

.mail-compose-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 520px; max-width: 94vw;
  background: white; box-shadow: -12px 0 36px rgba(20, 15, 40, 0.16);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(.16,1,.3,1), width 0.25s ease; }
.mail-compose-drawer.open .mail-compose-drawer-panel { transform: translateX(0); }
.mail-compose-drawer.fullscreen .mail-compose-drawer-panel { width: 100%; max-width: 100%; }

.mail-compose-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #E1DDF2; flex-shrink: 0; }
.mail-compose-title { font-size: 15px; font-weight: 800; color: #000; }
.mail-compose-header-actions { display: flex; gap: 6px; }
.mail-compose-icon-btn {
  width: 32px; height: 32px; border-radius: 6px; border: 1px solid #E1DDF2; background: white;
  color: #666; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; }
.mail-compose-icon-btn:hover { background: #F0EBF9; border-color: #7C5CFF; color: #7C5CFF; }

.mail-compose-body {
  flex: 1; overflow-y: auto; padding: 6px 20px; display: flex; flex-direction: column; }
.mail-compose-drawer.fullscreen .mail-compose-body { max-width: 820px; margin: 0 auto; width: 100%; padding-top: 20px; }
.mail-compose-field {
  display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #F1EEFA; flex-shrink: 0; }
.mail-compose-field label { width: 55px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: #999; }
.mail-compose-field input {
  flex: 1; border: none; outline: none; font-size: 13px; font-weight: 600; color: #000; background: transparent; }
.mail-compose-textarea {
  flex: 1; border: none; outline: none; resize: none; font-size: 13.5px; line-height: 1.7;
  color: #333; padding: 16px 0; font-family: inherit; min-height: 220px; }

.mail-compose-footer {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid #E1DDF2; flex-shrink: 0; }
.mail-compose-discard-btn {
  margin-left: auto; width: 36px; height: 36px; border-radius: 8px; border: 1px solid #E1DDF2; background: white;
  color: #999; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.mail-compose-discard-btn:hover { background: #FFEBEE; border-color: #DC2626; color: #DC2626; }

/* Mail Bulk Action Bar */
.mail-bulk-bar {
  display: flex; align-items: center; gap: 14px; padding: 8px 20px;
  background: #F0EBF9; border-bottom: 1px solid var(--border); }
.mail-bulk-count { font-size: 13px; font-weight: 800; color: #7C5CFF; }
.mail-bulk-actions { display: flex; gap: 8px; }
.mail-bulk-btn {
  padding: 7px 14px; border-radius: 7px; border: 1px solid #E1DDF2; background: white;
  color: #333; font-size: 12.5px; font-weight: 700; cursor: pointer; display: flex;
  align-items: center; gap: 6px; transition: all 0.2s; }
.mail-bulk-btn:hover { border-color: #7C5CFF; color: #7C5CFF; background: #F5F3F9; }
.mail-bulk-btn.danger:hover { border-color: #DC2626; color: #DC2626; background: #FFEBEE; }
.mail-bulk-clear {
  margin-left: auto; width: 26px; height: 26px; border-radius: 6px; border: none;
  background: transparent; color: #7C5CFF; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 14px; }
.mail-bulk-clear:hover { background: #E1DDF2; }

/* Mail Pagination & Filter */
.mail-filter-select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; color: #000000; cursor: pointer; font-weight: 750; transition: all var(--duration-base); }
.mail-filter-select:hover { background: var(--accent-soft); border-color: var(--accent); }
.mail-filter-select:focus { outline: none; border-color: var(--m3-primary); box-shadow: 0 0 0 2px rgba(124,92,255,.1); }

.mail-pagination { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px;
  border-top: 2px solid var(--m3-outline-variant); background: linear-gradient(135deg, #FFFFFF 0%, #FBF8FF 100%);
  gap: 24px; }
.mail-pagination-info { font-size: 13px; color: #000000; font-weight: 800; letter-spacing: 0.3px;
  background: var(--accent-soft); padding: 8px 14px; border-radius: var(--radius-sm);
  min-width: fit-content; }
.mail-pagination-controls { display: flex; align-items: center; gap: 12px; }
.mail-pagination-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 2px solid var(--m3-outline-variant);
  background: #FFFFFF; color: #000000; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-weight: 800; transition: all var(--duration-base); font-size: 16px;
  box-shadow: 0px 2px 4px rgba(124,92,255,.08); }
.mail-pagination-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--m3-primary);
  color: var(--m3-primary); box-shadow: 0px 4px 12px rgba(124,92,255,.16); transform: translateY(-1px); }
.mail-pagination-btn:active:not(:disabled) { transform: translateY(0px); }
.mail-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mail-pagination-pages { display: flex; gap: 8px; padding: 0 8px; }
.mail-page-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 2px solid var(--m3-outline-variant);
  background: #FFFFFF; color: #000000; cursor: pointer; font-size: 13px; font-weight: 800;
  transition: all var(--duration-base); box-shadow: 0px 2px 4px rgba(124,92,255,.08);
  display: flex; align-items: center; justify-content: center; }
.mail-page-btn:hover { background: var(--accent-soft); border-color: var(--m3-primary);
  color: var(--m3-primary); box-shadow: 0px 4px 12px rgba(124,92,255,.16); }
.mail-page-btn.active { background: var(--m3-primary); color: #FFFFFF; border-color: var(--m3-primary);
  box-shadow: 0px 4px 16px rgba(124,92,255,.28); font-weight: 800; }

/* ---------- Meetings System ---------- */
.meetings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap; }
.meetings-toolbar-title h2 { margin: 0 0 2px 0; }
.meetings-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meetings-toolbar-divider { width: 1px; height: 24px; background: #E1DDF2; }

.meeting-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.meeting-filter-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid #E1DDF2;
  background: #FFFFFF; color: #666; cursor: pointer; font-weight: 700; font-size: 12px;
  transition: all var(--duration-base); }
.meeting-filter-btn:hover { border-color: #7C5CFF; color: #7C5CFF; }
.meeting-filter-btn.active { background: #7C5CFF; color: white; border-color: #7C5CFF; }

.meetings-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0; }

.meeting-card { background: #FFFFFF; border-radius: 12px; border: 1px solid #E1DDF2;
  padding: 16px 18px; cursor: pointer; transition: all var(--duration-base);
  box-shadow: 0px 1px 3px rgba(0,0,0,.03); width: 100%; box-sizing: border-box; }
.meeting-card:hover { box-shadow: 0px 6px 18px rgba(124,92,255,.14); transform: translateY(-1px); border-color: #7C5CFF; }

/* Upcoming meetings */
.meeting-card.meeting-upcoming { border-color: #E1DDF2; }
.meeting-card.meeting-upcoming:hover { border-color: #7C5CFF; }

/* In-progress meetings — a live pulse dot on the badge is enough signal;
   the whole card no longer tints/pulses red (too noisy against the rest of the app). */
.meeting-card.meeting-inprogress { border-color: #F3D6D6; background: linear-gradient(135deg, #FFFFFF 0%, #FFFAFA 100%); }
.meeting-card.meeting-inprogress:hover { border-color: #DC2626; box-shadow: 0px 6px 18px rgba(220,38,38,.12); }

/* Completed meetings - muted/grayed out */
.meeting-card.meeting-completed { background: #FAFAFA; border-color: #E8E8E8;
  box-shadow: none; opacity: 0.7; }
.meeting-card.meeting-completed:hover { opacity: 0.9; border-color: #CCC; background: #F5F5F5; }

.meeting-card-header { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.meeting-status-badge { padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 10.5px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; }
.meeting-status-badge.upcoming { background: #EEF2FF; color: #7C5CFF; }
.meeting-status-badge.inprogress { background: #FFEBEE; color: #DC2626; }
.meeting-status-badge.inprogress::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #DC2626; animation: pulse-dot 1.4s infinite; }
.meeting-status-badge.completed { background: #F1F1F1; color: #777; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); }
}

.meeting-recording-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
  background: #FFEBEE; color: #DC2626; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  margin-left: auto; white-space: nowrap; }
.meeting-recording-indicator i { font-size: 11px; }

.meeting-card-body { display: flex; flex-direction: column; gap: 8px; }

.meeting-title { font-size: 15px; font-weight: 800; color: #000000; margin: 0;
  line-height: 1.3; }

.meeting-card.meeting-completed .meeting-title { color: #777; }

.meeting-meta { display: flex; gap: 12px; font-size: 12px; color: #555; font-weight: 700; flex-wrap: wrap; }
.meeting-time, .meeting-duration { display: flex; align-items: center; gap: 4px; }
.meeting-time i, .meeting-duration i { font-size: 12px; opacity: 0.7; }

.meeting-organizer { font-size: 12px; color: var(--text-muted); padding: 4px 0; }

.meeting-participants { font-size: 12px; color: var(--text-muted); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.participant-avatars { display: flex; gap: 4px; }
.participant-avatar { width: 26px; height: 26px; border-radius: 8px; background: #7C5CFF;
  color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
  border: 2px solid white; box-shadow: 0 1px 3px rgba(124,92,255,.1); }

.meeting-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.meeting-action-btn { padding: 8px 14px; font-size: 13px; white-space: nowrap; }

/* Meeting detail — right-side drawer (reuses .devlc-story-drawer shell) */
.meeting-drawer-title-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; }
.meeting-drawer-title { font-size: 21px; font-weight: 800; color: #000; line-height: 1.3; }

.meeting-drawer-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.meeting-drawer-meta-item label {
  display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; color: #999;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.meeting-drawer-meta-item div { font-size: 13px; font-weight: 700; color: #000; line-height: 1.5; }
.meeting-drawer-mono { font-family: var(--font-mono); font-size: 12px !important; }

.meeting-drawer-description { font-size: 13px; color: #333; line-height: 1.7; margin: 0; }

.meeting-drawer-participants { display: flex; flex-direction: column; gap: 8px; }
.meeting-drawer-participant-row { display: flex; align-items: center; gap: 10px; padding: 8px;
  background: #FAFAFC; border-radius: 8px; }
.meeting-drawer-participant-info { flex: 1; min-width: 0; }
.meeting-drawer-participant-name { font-size: 12.5px; font-weight: 700; color: #000; }
.meeting-drawer-participant-status { font-size: 11px; color: #999; font-weight: 600; margin-top: 1px; }

.meeting-drawer-setting-row { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid #F1EEFA; font-size: 12.5px; font-weight: 700; color: #333; }
.meeting-drawer-setting-row:last-child { border-bottom: none; }
.meeting-drawer-setting-row i { color: #999; margin-right: 6px; }
.meeting-drawer-setting-value { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.meeting-drawer-setting-value.on { background: #E8FBF5; color: #159E85; }
.meeting-drawer-setting-value.off { background: #F1F1F1; color: #999; }

.meeting-drawer-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.meeting-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Meeting detail modal */
.meeting-detail-modal { padding: 32px; }
.modal-close-btn { position: absolute; top: 20px; right: 20px; background: none; border: none;
  cursor: pointer; color: var(--text); font-size: 20px; padding: 4px 8px; }
.modal-close-btn:hover { color: var(--m3-primary); }

.meeting-detail-header { margin-bottom: 28px; border-bottom: 2px solid var(--m3-outline-variant); padding-bottom: 16px; }
.meeting-detail-title { font-size: 24px; font-weight: 800; color: #000000; margin: 0 0 12px 0; }
.meeting-detail-status { display: inline-block; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 800;
  font-size: 13px; }
.meeting-detail-status.upcoming { background: #EEF2FF; color: #7C5CFF; }
.meeting-detail-status.inprogress { background: #FFEBEE; color: #DC2626; }
.meeting-detail-status.completed { background: #F1F1F1; color: #777; }

.meeting-detail-section { margin-bottom: 24px; }
.meeting-detail-section h4 { font-size: 16px; font-weight: 800; color: #000000; margin: 0 0 16px 0; }
.meeting-detail-section p { margin: 0; color: var(--text); font-size: 13px; }

.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--m3-outline-variant); }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-weight: 700; color: #000000; font-size: 13px; min-width: 140px; }
.detail-value { color: var(--text); font-size: 13px; text-align: right; }

.participants-list { display: flex; flex-direction: column; gap: 12px; }
.participant-item { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--surface-container);
  border-radius: var(--radius-sm); }
.participant-info { flex: 1; }
.participant-name { font-weight: 700; color: #000000; font-size: 13px; }
.participant-status { color: var(--text-muted); font-size: 12px; }

.modal-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.modal-field { display: flex; flex-direction: column; }
.modal-field label { font-weight: 700; color: #000000; margin-bottom: 8px; font-size: 13px; }
.form-input, .form-textarea { border-radius: var(--radius-sm); border: 2px solid var(--m3-outline-variant);
  background: #FAFAFE; color: #000000; padding: 10px 12px; font-family: inherit; font-size: 13px;
  font-weight: 600; transition: all var(--duration-base); }
.form-input:hover, .form-textarea:hover { border-color: var(--m3-outline); }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--m3-primary);
  box-shadow: 0 0 0 2px rgba(124,92,255,.1); }

/* View toggle buttons - Redesigned */
.view-toggle-buttons { display: flex; gap: 2px; background: var(--surface-container); padding: 4px;
  border-radius: var(--radius-sm); border: 2px solid var(--m3-outline-variant); }
.view-toggle-btn { width: 38px; height: 38px; border-radius: var(--radius-xs); border: 2px solid transparent;
  background: transparent; color: #000000; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all var(--duration-base); font-weight: 700; }
.view-toggle-btn:hover { background: rgba(124,92,255,.1); color: var(--m3-primary); }
.view-toggle-btn.active { background: #FFFFFF; color: var(--m3-primary); border-color: var(--m3-outline-variant);
  box-shadow: 0 2px 4px rgba(124,92,255,.08); }

/* List View */
.meetings-list-view { width: 100%; background: white; border-radius: 12px; border: 1px solid #E1DDF2; overflow: hidden; }
.meetings-list-header { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1fr 0.8fr;
  gap: 12px; padding: 12px 16px; background: #FAFAFC;
  border-bottom: 1px solid #E1DDF2;
  font-weight: 800; color: #999; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.meetings-list-body { display: flex; flex-direction: column; }
.meetings-list-row { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1fr 0.8fr;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid #F1EEFA;
  background: #FFFFFF; cursor: pointer; transition: all var(--duration-base); align-items: center;
  border-left: 3px solid transparent; }
.meetings-list-row:last-child { border-bottom: none; }
.meetings-list-row:hover { background: #F5F3F9; }

/* List row status styles */
.meetings-list-row.meeting-row-upcoming { border-left-color: #7C5CFF; }

.meetings-list-row.meeting-row-inprogress { border-left-color: #DC2626; }

.meetings-list-row.meeting-row-completed { opacity: 0.65; }
.meetings-list-row.meeting-row-completed:hover { opacity: 0.85; }

.list-col-title, .list-col-time, .list-col-host, .list-col-participants, .list-col-status, .list-col-actions {
  display: flex; align-items: center; }

.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-weight: 800;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.status-badge.status-upcoming { background: #EEF2FF; color: #7C5CFF; }
.status-badge.status-inprogress { background: #FFEBEE; color: #DC2626; }
.status-badge.status-inprogress::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #DC2626; animation: pulse-dot 1.4s infinite; }
.status-badge.status-completed { background: #F1F1F1; color: #777; }

.participant-avatars-inline { display: flex; gap: 4px; }

.btn-icon-mini { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--m3-outline-variant);
  background: #FFFFFF; color: #000000; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all var(--duration-base); margin: 0 4px; }
.btn-icon-mini:hover { background: var(--accent-soft); border-color: var(--m3-primary); color: var(--m3-primary); }

.btn-action-primary { padding: 8px 16px; border-radius: var(--radius-sm); border: none;
  background: var(--m3-primary); color: white; cursor: pointer; font-weight: 700;
  font-size: 12px; transition: all var(--duration-base); white-space: nowrap; }
.btn-action-primary:hover { background: var(--bs-primary-dark); box-shadow: 0 4px 12px rgba(124,92,255,.24);
  transform: translateY(-1px); }

/* Calendar View */
.calendar-container { padding: 20px; }
.calendar-view { background: #FFFFFF; border-radius: var(--radius); padding: 24px;
  border: 2px solid var(--m3-outline-variant); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.calendar-title { font-size: 20px; font-weight: 800; color: #000000; margin: 0; }
.calendar-nav { display: flex; gap: 8px; }
.calendar-nav-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 2px solid var(--m3-outline-variant);
  background: #FFFFFF; color: #000000; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-base); }
.calendar-nav-btn:hover { background: var(--accent-soft); border-color: var(--m3-primary); }

.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 12px; }
.calendar-weekday { text-align: center; font-weight: 800; color: #000000; font-size: 12px; padding: 12px 0; }

.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-day { background: #FAFAFE; border: 2px solid var(--m3-outline-variant); border-radius: var(--radius-sm);
  padding: 12px; min-height: 120px; cursor: pointer; transition: all var(--duration-base); position: relative; }
.calendar-day:hover { background: var(--accent-soft); border-color: var(--m3-primary); }
.calendar-day-empty { background: transparent; border: none; cursor: default; }
.calendar-day-empty:hover { background: transparent; }

.calendar-day-today { background: #F5F3FF; border-color: #7C5CFF; }
.calendar-day-has-events { background: #FBFAFF; }

.calendar-day-number { font-weight: 800; color: #000000; font-size: 14px; margin-bottom: 8px; }
.calendar-day-events { display: flex; flex-direction: column; gap: 4px; }

.calendar-event { padding: 6px 8px; background: #7C5CFF; color: white; border-radius: 6px;
  font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: all var(--duration-base); display: block; }
.calendar-event:hover { transform: scale(1.02); box-shadow: 0 2px 8px rgba(124,92,255,.2); z-index: 10; }

.calendar-event.upcoming { background: #7C5CFF; }
.calendar-event.upcoming:hover { box-shadow: 0 4px 10px rgba(124,92,255,.32); }

.calendar-event.inprogress { background: #DC2626; box-shadow: 0 2px 8px rgba(220,38,38,.24); font-weight: 900; }
.calendar-event.inprogress:hover { box-shadow: 0 4px 12px rgba(220,38,38,.32); }

.calendar-event.completed { background: #999999; opacity: 0.65;
  box-shadow: none; }
.calendar-event.completed:hover { opacity: 0.8; }

.calendar-event-more { padding: 4px 6px; color: var(--text-muted); font-size: 10px; font-weight: 700; }

/* Calendar view mode buttons */
.calendar-view-modes { display: flex; gap: 6px; margin-bottom: 20px; padding: 0 20px; }
.calendar-mode-btn { padding: 8px 16px; border-radius: var(--radius-sm); border: 2px solid var(--m3-outline-variant);
  background: #FFFFFF; color: #000000; cursor: pointer; font-weight: 700; font-size: 12px;
  transition: all var(--duration-base); }
.calendar-mode-btn:hover { background: var(--accent-soft); border-color: var(--m3-primary); }
.calendar-mode-btn.active { background: var(--m3-primary); color: white; border-color: var(--m3-primary); }

/* Weekly View */
.weekly-view { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; padding: 20px; }
.weekly-day { background: #FFFFFF; border: 2px solid var(--m3-outline-variant); border-radius: var(--radius-sm);
  padding: 16px; min-height: 300px; }
.weekly-day.today { background: #F5F3FF; border-color: #7C5CFF;
  box-shadow: 0 4px 12px rgba(124,92,255,.16); }
.weekly-day-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--m3-outline-variant); }
.weekly-day-name { font-weight: 800; color: #000000; font-size: 13px; }
.weekly-day-date { font-weight: 800; color: var(--m3-primary); font-size: 18px; margin-top: 4px; }
.weekly-day-events { display: flex; flex-direction: column; gap: 8px; }
.no-events { color: var(--text-muted); font-size: 12px; text-align: center; padding: 40px 0;
  font-style: italic; }
.weekly-event { padding: 10px; background: var(--m3-primary); color: white; border-radius: var(--radius-xs);
  cursor: pointer; transition: all var(--duration-base); }
.weekly-event:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(124,92,255,.2); }
.weekly-event-title { font-weight: 700; font-size: 12px; }
.weekly-event-time { font-size: 11px; opacity: 0.9; margin-top: 4px; }
.weekly-event.upcoming { background: #7C5CFF; }
.weekly-event.inprogress { background: #DC2626; }
.weekly-event.completed { background: #999999; opacity: 0.65; }

/* Daily View */
.daily-view { padding: 20px; }
.daily-view.today::before { content: "Today"; display: block; color: var(--m3-primary);
  font-weight: 800; font-size: 12px; margin-bottom: 16px; }
.empty-day { text-align: center; padding: 60px 20px; }
.daily-meeting { padding: 16px; background: #FFFFFF; border: 2px solid var(--m3-outline-variant);
  border-left: 6px solid var(--m3-primary); border-radius: var(--radius-sm); margin-bottom: 12px;
  cursor: pointer; transition: all var(--duration-base); display: flex; gap: 16px; }
.daily-meeting:hover { box-shadow: 0 6px 16px rgba(124,92,255,.16); transform: translateX(4px); }
.daily-meeting.upcoming { border-left-color: #7C5CFF; }
.daily-meeting.inprogress { border-left-color: #DC2626; background: #FFFAFA; }
.daily-meeting.completed { border-left-color: #999999; background: #FAFAFA; opacity: 0.75; }
.daily-meeting-time { font-weight: 800; color: var(--m3-primary); font-size: 13px; min-width: 90px;
  text-align: center; line-height: 1.5; }
.daily-meeting-time .end-time { display: block; font-weight: 700; color: var(--text-muted); font-size: 11px; }
.daily-meeting-content { flex: 1; }
.daily-meeting-title { font-size: 15px; font-weight: 800; color: #000000; margin: 0 0 8px 0; }
.daily-meeting-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); font-weight: 700;
  margin-bottom: 8px; }
.daily-meeting-duration, .daily-meeting-host { display: flex; align-items: center; gap: 4px; }
.daily-meeting-status { display: inline-block; padding: 4px 10px; border-radius: var(--radius-xs);
  font-size: 11px; font-weight: 800; }
.daily-meeting-status.upcoming { background: #EEF2FF; color: #7C5CFF; }
.daily-meeting-status.inprogress { background: #FFEBEE; color: #DC2626; }
.daily-meeting-status.completed { background: #F1F1F1; color: #777; }

/* Pagination Styles */
.meetings-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 24px 20px;
  border-top: 2px solid var(--m3-outline-variant); background: linear-gradient(135deg, #FFFFFF 0%, #FBF8FF 100%);
  margin-top: 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.pagination-btn { padding: 10px 16px; border-radius: var(--radius-sm); border: 2px solid var(--m3-outline-variant);
  background: #FFFFFF; color: #000000; cursor: pointer; font-weight: 700; font-size: 13px;
  transition: all var(--duration-base); display: flex; align-items: center; gap: 6px; }
.pagination-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--m3-primary);
  color: var(--m3-primary); }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-info { font-weight: 800; color: #000000; font-size: 14px; min-width: 80px; text-align: center; }

/* Meeting Room Modal — premium dark video-call chrome, tinted toward brand violet
   instead of the old navy/blue mix, so it still reads as "this app" while keeping
   the dark surface that's standard for video call UI. */
.meeting-room-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0D0B14;
  z-index: 2000; display: none; align-items: center; justify-content: center; }

.meeting-room-container { width: 100%; height: 100%; display: flex; flex-direction: column;
  background: #0D0B14; }

.meeting-room-header { background: #13111C; padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; }
.meeting-room-title { display: flex; align-items: center; gap: 12px; }
.meeting-room-title h2 { margin: 0; color: white; font-size: 18px; font-weight: 800; }
.meeting-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(220,38,38,.16); color: #FF6B6B; }
.meeting-status-badge.live i { animation: pulse-dot 1.4s infinite; }
.meeting-room-header-controls { display: flex; gap: 8px; }
.header-control-btn { width: 38px; height: 38px; border: none; background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8); cursor: pointer; border-radius: 8px; font-size: 15px;
  transition: all var(--duration-base); }
.header-control-btn:hover { background: rgba(124,92,255,.28); color: white; }

.meeting-room-content { flex: 1; display: flex; gap: 12px; padding: 12px; overflow: hidden; }

.meeting-room-main { flex: 1; display: flex; flex-direction: column; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px; width: 100%; height: 100%; }
.video-item { background: #1A1726; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.06);
  position: relative; }
.video-item.main-video { grid-column: 1 / -1; min-height: 400px; }
.video-placeholder { text-align: center; color: rgba(255,255,255,.4); }
.video-placeholder i { font-size: 44px; display: block; margin-bottom: 10px; }
.video-placeholder div { font-size: 13px; font-weight: 700; }

.video-tile-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.video-tile-badge { width: 26px; height: 26px; border-radius: 50%; background: rgba(220,38,38,.85);
  color: white; display: none; align-items: center; justify-content: center; font-size: 11px; }
.video-tile-badge.show { display: flex; }
.video-tile-name { position: absolute; bottom: 12px; left: 12px; padding: 4px 10px;
  background: rgba(0,0,0,.5); color: white; font-size: 11.5px; font-weight: 700; border-radius: 6px; }

.meeting-room-sidebar { width: 280px; background: #13111C; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column;
  overflow: hidden; }
.sidebar-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-tab { flex: 1; padding: 8px 12px; border: none; background: transparent; color: rgba(255,255,255,.5);
  cursor: pointer; font-weight: 700; font-size: 12px; border-radius: 8px;
  transition: all var(--duration-base); }
.sidebar-tab:hover { color: white; background: rgba(255,255,255,.05); }
.sidebar-tab.active { color: white; background: rgba(124,92,255,.22); }

.sidebar-content { flex: 1; overflow-y: auto; padding: 10px; }

.participants-panel { display: flex; flex-direction: column; gap: 6px; }
.participant-item-room { display: flex; gap: 10px; align-items: center; padding: 10px;
  background: rgba(255,255,255,.04); border-radius: 10px; transition: all var(--duration-base); }
.participant-item-room:hover { background: rgba(255,255,255,.08); }
.participant-avatar-room { width: 36px; height: 36px; border-radius: 50%; background: #7C5CFF;
  color: white; display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: 13px; flex-shrink: 0; }
.participant-info-room { flex: 1; min-width: 0; }
.participant-name-room { color: white; font-size: 12.5px; font-weight: 700; }
.participant-status-room { color: rgba(255,255,255,.45); font-size: 11px; margin-top: 2px; }

/* Namespaced with room- prefix — .chat-panel/.chat-messages/.chat-message/.chat-send-btn
   are also used (with very different rules) by the main Chat page further down this file;
   sharing those generic names here let the main Chat page's styles leak in and break this
   layout (e.g. .chat-message picking up display:flex row layout meant for avatar+bubble rows). */
.room-chat-panel { display: flex; flex-direction: column; height: 100%; }
.room-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 10px; }
.room-chat-message { background: rgba(255,255,255,.05); padding: 10px 12px; border-radius: 10px; }
.room-chat-sender { color: #A78BFA; font-size: 11px; font-weight: 800; margin-bottom: 4px; }
.room-chat-text { color: rgba(255,255,255,.9); font-size: 12.5px; word-wrap: break-word; line-height: 1.5; }
.room-chat-time { color: rgba(255,255,255,.35); font-size: 10px; margin-top: 4px; }
.room-chat-input { display: flex; gap: 8px; }
.room-chat-input-field { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: white; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; outline: none; }
.room-chat-input-field:focus { border-color: #7C5CFF; }
.room-chat-input-field::placeholder { color: rgba(255,255,255,.35); }
.room-chat-send-btn { width: 36px; height: 36px; background: #7C5CFF; color: white;
  border: none; border-radius: 10px; cursor: pointer; font-size: 14px; flex-shrink: 0;
  transition: all var(--duration-base); }
.room-chat-send-btn:hover { background: #6B47E0; }

.meeting-room-footer { background: #13111C;
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex;
  justify-content: space-between; align-items: center; }
.meeting-info-bar { display: flex; gap: 22px; }
.info-item { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; }
.info-item i { color: #A78BFA; }

.meeting-controls { display: flex; gap: 10px; align-items: center; }
.control-btn { width: 44px; height: 44px; border: none; border-radius: 50%;
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-base); color: white; font-weight: 700; background: rgba(255,255,255,.08); }
.control-btn:hover { background: rgba(255,255,255,.16); }
.control-btn.active-toggle { background: #7C5CFF; }
.control-btn.active-toggle:hover { background: #6B47E0; }
.control-btn.muted-toggle { background: rgba(220,38,38,.2); color: #FF6B6B; }
.control-btn.muted-toggle:hover { background: rgba(220,38,38,.3); }
.control-btn.leave-btn { background: #DC2626; padding: 0 18px;
  width: auto; gap: 7px; border-radius: 999px; }
.control-btn.leave-btn:hover { background: #B91C1C; box-shadow: 0 4px 14px rgba(220,38,38,.35); }

/* Floating Meeting Panel — minimized call, bottom-right */
.floating-panel { position: fixed; bottom: 20px; right: 20px; width: 340px;
  background: #13111C; border-radius: 16px;
  border: 1px solid rgba(124,92,255,.35); box-shadow: 0 16px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; z-index: 1500; overflow: hidden;
  animation: slideInRight 0.3s cubic-bezier(.34,1.56,.64,1); }

@keyframes slideInRight {
  from { transform: translateX(400px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.floating-header { background: #17141F;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center; }
.floating-title { color: white; font-weight: 800; font-size: 13px; }
.floating-controls { display: flex; gap: 6px; }
.floating-btn { width: 28px; height: 28px; background: rgba(255,255,255,.06);
  border: none; color: rgba(255,255,255,.8); border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: all var(--duration-base); }
.floating-btn:hover { background: #7C5CFF; color: white; }

.floating-video { width: 100%; height: 180px; background: #0D0B14;
  display: flex; align-items: center; justify-content: center; position: relative; }
.floating-video .video-placeholder { font-size: 22px; color: rgba(255,255,255,.3); }

.floating-controls-bar { display: flex; justify-content: center; gap: 8px; padding: 12px;
  background: #17141F; }
.floating-control-btn { width: 36px; height: 36px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-base); color: white; font-weight: 700; background: rgba(255,255,255,.08); }
.floating-control-btn:hover { background: rgba(255,255,255,.16); }
.floating-control-btn.leave-btn { background: #DC2626; }
.floating-control-btn.leave-btn:hover { background: #B91C1C; }

.meeting-reaction-float {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  font-size: 32px; animation: reaction-float 1.5s ease-out forwards; pointer-events: none; z-index: 5; }
@keyframes reaction-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -20px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -140px) scale(1); }
}

/* ---------- Chat System - Slack-like UI ---------- */
.chat-wrapper { display: flex; height: 100%; background: #FFFFFF; }

.chat-sidebar {
  width: 300px; background: #FFFFFF;
  border-right: 1px solid #E1DDF2; display: flex; flex-direction: column; overflow-y: auto;
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.05); }

.chat-sidebar-header {
  padding: 8px 10px; border-bottom: 1px solid #E1DDF2; display: flex;
  justify-content: space-between; align-items: center; }
.chat-sidebar-header h3 {
  margin: 0; font-size: 20px; font-weight: 900; color: #000000;
  letter-spacing: -0.4px; }
.chat-new-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #7C5CFF;
  color: white; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all 0.2s;
  font-size: 16px; box-shadow: 0 2px 8px rgba(124, 92, 255, 0.3); }
.chat-new-btn:hover {
  background: #6B4FE8; transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(124, 92, 255, 0.4); }

.chat-search-box { padding: 8px 12px; }
.chat-search-input {
  width: 100%; padding: 8px 12px; border-radius: 18px;
  border: 1px solid #DDD; background: #F7F6F8; color: #000000; font-size: 12px;
  font-weight: 500; transition: all 0.2s; }
.chat-search-input:focus {
  outline: none; border-color: #7C5CFF; background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.1); }
.chat-search-input::placeholder { color: #999; font-weight: 500; }

.chat-category {
  padding: 8px 0 0 0; }
.chat-category-title {
  padding: 6px 10px; font-size: 11px; font-weight: 700; color: #666;
  text-transform: uppercase; letter-spacing: 0.6px;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: all 0.2s ease; user-select: none; }
.chat-category-title:hover { color: #333; }
.chat-category-title::before {
  content: '▼'; font-size: 8px; transition: transform 0.2s ease;
  display: inline-block; width: 12px; }
.chat-category.collapsed .chat-category-title::before {
  transform: rotate(-90deg); }

.chat-category .chat-list {
  max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease;
}
.chat-category.collapsed .chat-list {
  max-height: 0; }

.chat-list { display: flex; flex-direction: column; }

.chat-item {
  padding: 8px 10px 8px 13px; cursor: pointer; display: flex; gap: 10px;
  align-items: center; transition: all 0.15s ease; margin: 0;
  border-bottom: 1px solid #F1EEFA; border-left: 3px solid transparent;
  color: #000000; position: relative; }
.chat-item:hover {
  background: #F5F3F9; }
.chat-item.active {
  background: #F0EBF9;
  border-left-color: #7C5CFF; }

.chat-item-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-item-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; }
.chat-item-avatar.channel { border-radius: 10px; font-weight: 800; font-size: 16px; }
.chat-item-online-dot {
  width: 9px; height: 9px; background: #22C3A6; border-radius: 50%;
  position: absolute; bottom: -1px; right: -1px; border: 2px solid white; }

.chat-item-info { flex: 1; min-width: 0; }
.chat-item-top-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-item-name {
  font-size: 12.5px; font-weight: 600; color: #000000; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.chat-item.active .chat-item-name { color: #7C5CFF; font-weight: 700; }
.chat-item-time { font-size: 10.5px; color: #AAA; font-weight: 600; flex-shrink: 0; }
.chat-item.has-unread .chat-item-time { color: #7C5CFF; font-weight: 800; }

.chat-item-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.chat-item-preview {
  font-size: 11.5px; color: #999; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.chat-item.has-unread .chat-item-name { font-weight: 800; color: #000; }
.chat-item.has-unread .chat-item-preview { color: #333; font-weight: 600; }
.chat-item-unread-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #7C5CFF; color: white; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.chat-main {
  flex: 1; display: flex; flex-direction: column;
  background: #FFFFFF; }

.chat-header {
  padding: 8px 12px; border-bottom: 1px solid #E1DDF2; display: flex;
  justify-content: space-between; align-items: center;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.chat-header-left { flex: 1; }
.chat-title {
  margin: 0; font-size: 15px; font-weight: 800; color: #000000; }
.chat-description {
  font-size: 12px; color: #888; margin-top: 2px; display: block; font-weight: 500; }
.chat-header-right { display: flex; gap: 8px; }
.chat-header-icon {
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: #666; font-size: 16px; transition: all 0.2s; }
.chat-header-icon:hover {
  background: rgba(124, 92, 255, 0.1); color: #7C5CFF; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 12px 16px; display: flex;
  flex-direction: column; gap: 8px;
  background: #FFFFFF; }

.chat-message {
  display: flex; gap: 12px; margin-bottom: 4px; align-items: flex-start;
  animation: slideIn 0.3s ease-out; }
.chat-message.own { justify-content: flex-end; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-message-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #7C5CFF 0%, #6B4FE8 100%);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
  box-shadow: 0 2px 6px rgba(124, 92, 255, 0.2); }

.chat-message-content { max-width: 70%; }
.chat-message.own .chat-message-content { max-width: 70%; }

.chat-message-header {
  font-size: 12px; font-weight: 700; color: #333; margin-bottom: 3px; }
.chat-message-text {
  background: #FFFFFF; padding: 10px 14px; border-radius: 12px;
  color: #1a1a1a; font-size: 13px; line-height: 1.5; word-wrap: break-word;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #E8E6F0; }
.chat-message.own .chat-message-text {
  background: linear-gradient(135deg, #7C5CFF 0%, #6B4FE8 100%);
  color: white; border: none;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.25); font-weight: 500; }

.chat-message-time {
  font-size: 11px; color: #AAA; margin-top: 4px; font-weight: 500; }

.chat-empty-state {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #AAA; gap: 10px; }
.chat-empty-state i { font-size: 36px; opacity: 0.4; }
.chat-empty-state p { font-size: 13px; font-weight: 600; margin: 0; }

.chat-input-wrapper {
  padding: 12px 16px 16px; border-top: 1px solid #E1DDF2; display: flex; gap: 8px;
  align-items: flex-end;
  background: #FFFFFF; flex-wrap: wrap; }

.chat-input-actions {
  display: flex; gap: 4px; }

.chat-action-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid #E1DDF2;
  background: #FFFFFF; color: #999; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 15px; transition: all 0.2s;
  position: relative; }
.chat-action-btn:hover {
  background: #F0EBF9; border-color: #7C5CFF; color: #7C5CFF; }
.chat-action-btn:active { transform: scale(0.94); }

.chat-textarea {
  flex: 1; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #DDD;
  background: #FFFFFF; color: #000000; font-size: 13px; font-weight: 500;
  font-family: inherit; transition: all 0.2s; resize: none; max-height: 80px;
  min-height: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.chat-textarea:focus {
  outline: none; border-color: #7C5CFF; background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.15); }
.chat-textarea::placeholder { color: #AAA; font-weight: 500; }
.chat-send-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #7C5CFF 0%, #6B4FE8 100%);
  color: white; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.3);
  flex-shrink: 0; }
.chat-send-btn:hover {
  transform: scale(1.08); box-shadow: 0 4px 12px rgba(124, 92, 255, 0.4); }
.chat-send-btn:active { transform: scale(0.95); }

.chat-info {
  width: 320px; background: #FFFFFF;
  border-left: 1px solid #E1DDF2; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.25s ease-out;
  position: absolute; right: 0; height: 100%; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05); }
.chat-wrapper.info-open .chat-info { transform: translateX(0); }

.chat-info-header {
  padding: 16px; border-bottom: 1px solid #E1DDF2; display: flex;
  justify-content: space-between; align-items: center; }
.chat-info-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: #000000; }
.chat-info-close {
  width: 28px; height: 28px; border-radius: 4px; border: none;
  background: transparent; cursor: pointer; color: #888; font-size: 16px;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.chat-info-close:hover { background: #F5F3F9; color: #7C5CFF; }

.chat-info-content { flex: 1; overflow-y: auto; padding: 16px; }

/* ---------- New Chat drawer ---------- */
.newchat-tabs {
  display: flex; gap: 4px; background: #F5F3F9; padding: 4px; border-radius: 10px;
  margin-bottom: 18px; }
.newchat-tab {
  flex: 1; padding: 8px 6px; border: none; background: transparent; border-radius: 7px;
  color: #666; cursor: pointer; font-size: 12px; font-weight: 700; transition: all 0.2s; }
.newchat-tab:hover { color: #7C5CFF; }
.newchat-tab.active { background: white; color: #7C5CFF; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.newchat-search { position: relative; margin-bottom: 12px; }
.newchat-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #AAA; font-size: 13px; }
.newchat-search input {
  width: 100%; padding: 9px 12px 9px 32px; border: 1px solid #E1DDF2; border-radius: 8px;
  font-size: 12.5px; outline: none; transition: all 0.2s; }
.newchat-search input:focus { border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124,92,255,.12); }

.newchat-people-list { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; }
.newchat-person-row {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px;
  cursor: pointer; transition: background 0.15s; }
.newchat-person-row:hover { background: #F5F3F9; }
.newchat-person-row.selected { background: #F0EBF9; }
.newchat-person-row > i { color: #CCC; font-size: 14px; }
.newchat-person-row.selected > i { color: #7C5CFF; }
.newchat-person-name { flex: 1; font-size: 12.5px; font-weight: 600; color: #000; }
.newchat-empty { padding: 20px; text-align: center; color: #AAA; font-size: 12.5px; font-weight: 600; }

.newchat-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.newchat-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #F0EBF9; color: #7C5CFF;
  padding: 5px 8px 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.newchat-chip i { cursor: pointer; font-size: 12px; }
.newchat-chip i:hover { color: #6B47E0; }

.newchat-submit-btn { width: 100%; margin-top: 14px; }

/* ---------- Chat Action Modals ---------- */
.chat-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); display: none; align-items: center;
  justify-content: center; z-index: 1000; }
.chat-modal.active { display: flex; }

.chat-modal-content {
  background: #FFFFFF; border-radius: 12px; width: 90%; max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-height: 80vh;
  overflow-y: auto; }

.chat-modal-header {
  padding: 18px 20px; border-bottom: 1px solid #E1DDF2; display: flex;
  justify-content: space-between; align-items: center; }
.chat-modal-header h3 {
  margin: 0; font-size: 16px; font-weight: 800; color: #000000; }
.chat-modal-close {
  width: 32px; height: 32px; border-radius: 6px; border: none;
  background: transparent; cursor: pointer; color: #888; font-size: 16px;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.chat-modal-close:hover { background: #F5F3F9; color: #7C5CFF; }

.chat-modal-body {
  padding: 20px; }

.chat-modal-footer {
  padding: 16px 20px; border-top: 1px solid #E1DDF2; display: flex;
  gap: 12px; justify-content: flex-end; }

/* File Upload */
.file-upload-area {
  border: 2px dashed #DDD; border-radius: 8px; padding: 30px; text-align: center;
  cursor: pointer; transition: all 0.2s; margin-bottom: 16px; }
.file-upload-area:hover {
  border-color: #7C5CFF; background: rgba(124, 92, 255, 0.05); }
.file-upload-area i { font-size: 32px; color: #7C5CFF; margin-bottom: 8px; }
.file-upload-area p { margin: 8px 0; font-weight: 600; color: #000000; }
.file-upload-area span { font-size: 12px; color: #888; }

.file-list { margin-top: 16px; }
.file-item {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: #F5F3F9; border-radius: 6px; margin-bottom: 8px; }
.file-item i { color: #7C5CFF; font-size: 18px; }
.file-item-name { flex: 1; font-size: 13px; font-weight: 600; color: #000000; }
.file-item-remove { cursor: pointer; color: #999; }

/* Audio Recorder */
.audio-recorder { text-align: center; padding: 20px 0; }
.audio-timer {
  font-size: 32px; font-weight: 800; color: #7C5CFF; margin-bottom: 20px;
  font-family: 'Courier New', monospace; }
.audio-buttons { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.btn-record {
  padding: 12px 24px; border-radius: 8px; border: none;
  background: #FF4757; color: white; cursor: pointer; font-weight: 700;
  transition: all 0.2s; }
.btn-record:hover { background: #FF3838; }
.btn-stop {
  padding: 12px 24px; border-radius: 8px; border: none;
  background: #2F3542; color: white; cursor: pointer; font-weight: 700; }
.audio-preview { margin-top: 20px; }
.audio-preview audio { width: 100%; max-width: 300px; }

/* Poll Form */
.poll-form { }
.poll-options { margin: 16px 0; }
.btn-add-option {
  width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #7C5CFF;
  background: transparent; color: #7C5CFF; cursor: pointer; font-weight: 700;
  transition: all 0.2s; margin-top: 12px; }
.btn-add-option:hover { background: rgba(124, 92, 255, 0.1); }

/* Form Elements */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 700; color: #333;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-input, .form-textarea {
  width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #DDD;
  background: #F7F6F8; color: #000000; font-size: 13px; font-weight: 500;
  font-family: inherit; transition: all 0.2s; resize: vertical; }
.form-input:focus, .form-textarea:focus {
  outline: none; border-color: #7C5CFF; background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.1); }
.form-textarea { min-height: 120px; }

/* Buttons */
.btn-primary {
  padding: 10px 20px; border-radius: 6px; border: none;
  background: #7C5CFF; color: white; cursor: pointer; font-weight: 700;
  transition: all 0.2s; }
.btn-primary:hover { background: #6B4FE8; }
.btn-secondary {
  padding: 10px 20px; border-radius: 6px; border: 1px solid #DDD;
  background: transparent; color: #666; cursor: pointer; font-weight: 700;
  transition: all 0.2s; }
.btn-secondary:hover { background: #F5F3F9; color: #333; }

/* ---------- Documents Page (Two-Column Layout) ---------- */
#docs { flex-direction: column; background: #FFFFFF; }

.documents-layout {
  display: flex; height: 100%; background: #FFFFFF; gap: 0; margin: 0; }

/* Left Sidebar */
.docs-sidebar {
  width: 280px; background: #FFFFFF;
  border-right: 1px solid #E1DDF2; display: flex; flex-direction: column;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.03); }

.docs-sidebar-header {
  padding: 10px 12px; border-bottom: 1px solid #E1DDF2; display: flex;
  justify-content: space-between; align-items: center; }
.docs-sidebar-header h3 {
  margin: 0; font-size: 18px; font-weight: 900; color: #000000;
  letter-spacing: -0.3px; }

.docs-new-btn {
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: #7C5CFF; color: white; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 16px;
  transition: all 0.2s; }
.docs-new-btn:hover { background: #6B4FE8; transform: scale(1.08); }

.docs-search {
  padding: 8px 10px; border-bottom: 1px solid #E1DDF2; }
.docs-search-input {
  width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid #DDD;
  background: #F7F6F8; color: #000000; font-size: 12px; font-weight: 500; }
.docs-search-input:focus {
  outline: none; border-color: #7C5CFF; background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.1); }

.docs-folders {
  flex: 1; overflow-y: auto; padding: 8px 0; }

.docs-folder-title {
  padding: 6px 10px; font-size: 10px; font-weight: 800; color: #999;
  text-transform: uppercase; letter-spacing: 0.5px; }

.docs-folder-item {
  padding: 8px 12px; cursor: pointer; display: flex; gap: 12px;
  align-items: center; transition: all 0.2s; border: none;
  background: transparent; color: #666; font-size: 13px; font-weight: 600;
  width: 100%; }
.docs-folder-item:hover { background: #F5F3F9; color: #333; }
.docs-folder-item.active {
  background: #7C5CFF; color: white; }
.docs-folder-item i {
  font-size: 16px; }

/* Middle: Document List */
.docs-main {
  flex: 1; display: flex; flex-direction: column; background: #FFFFFF;
  border-right: 1px solid #E1DDF2; }

.docs-toolbar {
  padding: 8px 12px; border-bottom: 1px solid #E1DDF2; display: flex;
  justify-content: space-between; align-items: center; gap: 12px; }

.docs-view-options {
  display: flex; gap: 6px; }
.docs-view-btn {
  width: 36px; height: 36px; border-radius: 6px; border: 1px solid #DDD;
  background: transparent; color: #666; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all 0.2s; }
.docs-view-btn:hover { background: #F5F3F9; }
.docs-view-btn.active {
  background: #7C5CFF; color: white; border-color: #7C5CFF; }

.docs-sort-select {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #DDD;
  background: #F7F6F8; color: #000000; font-size: 12px; font-weight: 600;
  cursor: pointer; }
.docs-sort-select:focus {
  outline: none; border-color: #7C5CFF; }

.docs-list {
  flex: 1; overflow-y: auto; }

.docs-item {
  padding: 10px 12px; border-bottom: 1px solid #E1DDF2; display: flex;
  gap: 10px; align-items: center; cursor: pointer; transition: all 0.2s; }
.docs-item:hover { background: #F9F8FB; }
.docs-item.active { background: #F0EBF9; border-left: 4px solid #7C5CFF; }

.docs-item-icon {
  font-size: 20px; color: #7C5CFF; flex-shrink: 0; width: 24px; }
.docs-item-info {
  flex: 1; min-width: 0; }
.docs-item-name {
  font-size: 13px; font-weight: 700; color: #000000; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.docs-item-meta {
  font-size: 11px; color: #999; }
.docs-item-actions {
  display: flex; gap: 4px; }
.docs-action-btn {
  width: 28px; height: 28px; border-radius: 4px; border: none;
  background: transparent; color: #999; cursor: pointer; font-size: 14px;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.docs-action-btn:hover { background: #E1DDF2; color: #7C5CFF; }

/* Right: Preview Panel */
.docs-preview {
  width: 320px; background: #FAFAFA;
  border-left: 1px solid #E1DDF2; display: flex; flex-direction: column;
  box-shadow: -1px 0 4px rgba(0, 0, 0, 0.03); }

.docs-preview-content {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; align-items: center; justify-content: center; }

.docs-preview-empty {
  text-align: center; color: #AAAAAA; }
.docs-preview-empty i {
  font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.docs-preview-empty p {
  margin: 0; font-size: 13px; font-weight: 600; }

.docs-preview-info {
  padding: 10px 12px; border-top: 1px solid #E1DDF2; }
.docs-preview-info-item {
  margin-bottom: 8px; }
.docs-preview-info-label {
  font-size: 10px; color: #999; text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.5px; margin-bottom: 4px; }
.docs-preview-info-value {
  font-size: 13px; color: #000000; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ---------- Document Editors (Full Screen) ---------- */
.doc-editor-fullscreen {
  display: flex; flex-direction: column; height: 100%; background: white; }

.doc-editor-header-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid #E1DDF2; background: white;
  position: sticky; top: 0; z-index: 100; }
.doc-back-btn {
  background: transparent; border: none; cursor: pointer; color: #7C5CFF;
  font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 6px;
  display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.doc-back-btn:hover { background: #F0EBF9; }

.doc-editor-title {
  display: flex; align-items: center; gap: 12px; font-size: 16px;
  font-weight: 700; color: #000000; flex: 1; }
.doc-editor-icon { font-size: 24px; }

.doc-editor-actions {
  display: flex; gap: 8px; }
.doc-editor-actions button {
  padding: 8px 16px; background: #7C5CFF; color: white; border: none;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: all 0.2s; }
.doc-editor-actions button:hover { background: #6B47E0; }

.doc-editor-toolbar {
  display: flex; gap: 16px; padding: 12px 20px;
  border-bottom: 1px solid #E1DDF2; background: #FAFAFA;
  align-items: center; flex-wrap: wrap; }
.toolbar-group {
  display: flex; gap: 8px; }
.toolbar-group button {
  padding: 8px 12px; background: white; border: 1px solid #DDD;
  border-radius: 4px; cursor: pointer; font-size: 12px;
  color: #333; transition: all 0.2s; display: flex; gap: 6px;
  align-items: center; }
.toolbar-group button:hover { background: #F0EBF9; border-color: #7C5CFF; color: #7C5CFF; }

.doc-editor-content {
  flex: 1; overflow: auto; padding: 20px; background: white; }

/* Word Editor */
.word-editor-area {
  min-height: 100%; padding: 20px; background: white;
  border: 1px solid #E1DDF2; border-radius: 6px; line-height: 1.6;
  font-size: 14px; color: #333; outline: none; }
.word-editor-area:focus { border-color: #7C5CFF; }

/* Excel Editor */
.excel-editor-area {
  overflow: auto; }
.excel-grid {
  width: 100%; border-collapse: collapse;
  background: white; }
.excel-grid th, .excel-grid td {
  border: 1px solid #DDD; padding: 12px;
  text-align: left; font-size: 13px; }
.excel-grid th {
  background: #F5F3F9; font-weight: 700; color: #333; }
.excel-grid td {
  background: white; }
.excel-grid td:focus { background: #F0EBF9; outline: none; }
.excel-grid td[contenteditable]:hover { background: #FFFACD; }

/* PowerPoint Editor */
.ppt-editor-area {
  display: flex; gap: 16px; }
.ppt-slides-panel {
  width: 200px; border-right: 1px solid #E1DDF2;
  overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; }
.ppt-slide-thumbnail {
  border: 2px solid #DDD; border-radius: 6px; cursor: pointer;
  overflow: hidden; transition: all 0.2s; }
.ppt-slide-thumbnail:hover { border-color: #7C5CFF; box-shadow: 0 2px 8px rgba(124, 92, 255, 0.1); }
.ppt-slide-thumbnail.active { border-color: #7C5CFF; box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.2); }

.ppt-slide-editor {
  flex: 1; background: white; border: 1px solid #E1DDF2;
  border-radius: 6px; padding: 40px; display: flex;
  align-items: center; justify-content: center; text-align: center;
  font-size: 20px; color: #666; }

/* Chart Editor */
.chart-editor-area {
  display: flex; align-items: center; justify-content: center;
  background: white; border: 1px solid #E1DDF2; border-radius: 6px;
  padding: 20px; }

/* PDF Editor */
.pdf-editor-area {
  display: flex; align-items: center; justify-content: center;
  background: #F5F5F5; overflow: auto; }
.pdf-page-container {
  width: 100%; max-width: 900px; padding: 20px; }
.pdf-page {
  background: white; border: 1px solid #DDD; border-radius: 6px;
  padding: 40px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.6; color: #333; }
.pdf-page-number {
  font-size: 12px; color: #999; margin-bottom: 20px; text-align: right; }
.pdf-content h1 {
  font-size: 28px; font-weight: 700; margin-bottom: 16px; color: #000; }
.pdf-content h2 {
  font-size: 20px; font-weight: 700; margin-top: 20px; margin-bottom: 12px; color: #000; }
.pdf-content p {
  font-size: 14px; margin-bottom: 12px; }

/* ---------- Wiki (Confluence-style Knowledge Base) ---------- */
#wiki { flex-direction: column; background: #FFFFFF; }

.wiki-layout {
  display: flex; height: 100%; background: #FFFFFF; }

/* Left: Spaces + Page Tree */
.wiki-sidebar {
  width: 280px; flex-shrink: 0; background: #FAFAFC; border-right: 1px solid #E1DDF2;
  display: flex; flex-direction: column; }

.wiki-sidebar-header {
  padding: 12px 14px; border-bottom: 1px solid #E1DDF2; display: flex;
  justify-content: space-between; align-items: center; }
.wiki-sidebar-header h3 {
  margin: 0; font-size: 14px; font-weight: 800; color: #000000;
  display: flex; align-items: center; gap: 8px; }
.wiki-sidebar-header h3 i { color: #7C5CFF; font-size: 16px; }
.wiki-new-btn {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: #7C5CFF; color: white; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.wiki-new-btn:hover { background: #6B47E0; transform: scale(1.05); }

.wiki-search {
  position: relative; padding: 10px 12px; border-bottom: 1px solid #E1DDF2; }
.wiki-search i {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  color: #AAA; font-size: 13px; }
.wiki-search input {
  width: 100%; padding: 8px 10px 8px 30px; border: 1px solid #E1DDF2;
  border-radius: 6px; font-size: 12.5px; background: white; outline: none;
  transition: all 0.2s; }
.wiki-search input:focus { border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124,92,255,.12); }

.wiki-spaces-list {
  flex: 1; overflow-y: auto; padding: 8px 0; }

.wiki-sidebar-footer {
  padding: 10px 12px; border-top: 1px solid #E1DDF2; flex-shrink: 0; }
.wiki-create-space-btn {
  width: 100%; padding: 9px 12px; background: transparent; border: 1px dashed #C9BFEF;
  border-radius: 8px; color: #7C5CFF; font-size: 12.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 6px; transition: all 0.2s; }
.wiki-create-space-btn:hover { background: #F0EBF9; border-color: #7C5CFF; }

.wiki-space-group { margin-bottom: 2px; }
.wiki-space-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  cursor: pointer; user-select: none; transition: all 0.15s; }
.wiki-space-header:hover { background: #F0EBF9; }
.wiki-space-header:hover .wiki-space-add-btn { opacity: 1; }
.wiki-space-header .wiki-space-chevron {
  font-size: 10px; color: #999; transition: transform 0.2s; flex-shrink: 0; }
.wiki-space-group.expanded .wiki-space-chevron { transform: rotate(90deg); }
.wiki-space-icon {
  width: 22px; height: 22px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; color: white; font-size: 11px;
  flex-shrink: 0; }
.wiki-space-name {
  font-size: 12.5px; font-weight: 700; color: #000000; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-space-count {
  font-size: 10.5px; color: #999; font-weight: 600; }
.wiki-space-add-btn {
  width: 20px; height: 20px; border-radius: 5px; border: none; background: transparent;
  color: #999; font-size: 11px; opacity: 0; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.wiki-space-add-btn:hover { background: #E1DDF2; color: #7C5CFF; }

.wiki-page-tree {
  display: none; padding: 2px 0 6px 0; }
.wiki-space-group.expanded .wiki-page-tree { display: block; }
.wiki-tree-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 44px;
  cursor: pointer; font-size: 12px; color: #555; font-weight: 600;
  border-left: 3px solid transparent; transition: all 0.15s; }
.wiki-tree-item:hover { background: #F5F3F9; color: #000; }
.wiki-tree-item.active {
  background: #F0EBF9; color: #7C5CFF; border-left-color: #7C5CFF; }
.wiki-tree-item i { font-size: 12px; color: #BBB; flex-shrink: 0; }
.wiki-tree-item.active i { color: #7C5CFF; }
.wiki-tree-item span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search results (flat list) */
.wiki-search-results { padding: 4px 0; }
.wiki-search-results-label {
  padding: 8px 14px 4px 14px; font-size: 10px; font-weight: 800; color: #999;
  text-transform: uppercase; letter-spacing: 0.5px; }
.wiki-search-empty {
  padding: 20px 14px; text-align: center; color: #AAA; font-size: 12.5px; }

/* Middle: Page Content */
.wiki-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: #FFFFFF; border-right: 1px solid #E1DDF2; }

.wiki-breadcrumb {
  padding: 12px 32px; border-bottom: 1px solid #E1DDF2; display: flex;
  align-items: center; gap: 8px; font-size: 12.5px; color: #999;
  font-weight: 600; flex-wrap: wrap; }
.wiki-breadcrumb .crumb {
  cursor: pointer; transition: color 0.15s; }
.wiki-breadcrumb .crumb:hover { color: #7C5CFF; }
.wiki-breadcrumb .crumb.current {
  color: #000000; font-weight: 700; cursor: default; }
.wiki-breadcrumb .sep { color: #CCC; }

.wiki-page-scroll {
  flex: 1; overflow-y: auto; }

.wiki-page-content {
  max-width: 760px; margin: 0 auto; padding: 32px 32px 80px 32px; }

.wiki-page-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 8px; }
.wiki-page-title {
  font-size: 30px; font-weight: 800; color: #000000; line-height: 1.25;
  font-family: var(--font-heading, inherit); }
.wiki-page-actions { display: flex; gap: 6px; flex-shrink: 0; padding-top: 4px; }
.wiki-page-action-btn {
  width: 32px; height: 32px; border-radius: 6px; border: 1px solid #E1DDF2;
  background: white; color: #666; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.wiki-page-action-btn:hover { background: #F0EBF9; border-color: #7C5CFF; color: #7C5CFF; }
.wiki-page-action-btn.starred { color: #FFB03A; border-color: #FFE1AE; background: #FFF8EA; }
.wiki-page-action-btn.wiki-save-btn {
  width: auto; padding: 0 14px; gap: 6px; background: #7C5CFF; border-color: #7C5CFF;
  color: white; font-size: 12.5px; font-weight: 700; }
.wiki-page-action-btn.wiki-save-btn:hover { background: #6B47E0; color: white; }

.wiki-title-input {
  flex: 1; font-size: 30px; font-weight: 800; color: #000000; line-height: 1.25;
  font-family: var(--font-heading, inherit); border: none; border-bottom: 2px solid #E1DDF2;
  padding: 2px 0 6px 0; outline: none; background: transparent; }
.wiki-title-input:focus { border-color: #7C5CFF; }

.wiki-edit-toolbar {
  display: flex; gap: 6px; padding: 10px 0; margin-bottom: 12px;
  border-bottom: 1px solid #E1DDF2; }
.wiki-edit-toolbar button {
  width: 32px; height: 32px; border-radius: 6px; border: 1px solid #E1DDF2;
  background: white; color: #555; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.wiki-edit-toolbar button:hover { background: #F0EBF9; border-color: #7C5CFF; color: #7C5CFF; }

.wiki-edit-body {
  min-height: 300px; border: 1px solid #E1DDF2; border-radius: 8px;
  padding: 16px 18px; outline: none; }
.wiki-edit-body:focus { border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124,92,255,.10); }

.wiki-page-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid #E1DDF2; flex-wrap: wrap; }
.wiki-author-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #7C5CFF;
  color: white; font-size: 11px; font-weight: 800; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.wiki-page-meta-text {
  font-size: 12.5px; color: #777; font-weight: 600; }
.wiki-page-meta-text b { color: #000; font-weight: 700; }
.wiki-page-meta-dot { color: #CCC; }
.wiki-page-views {
  display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #999; font-weight: 600; }

/* Rich content typography */
.wiki-body h2 {
  font-size: 21px; font-weight: 800; color: #000000; margin: 32px 0 12px 0;
  scroll-margin-top: 20px; }
.wiki-body h2:first-child { margin-top: 0; }
.wiki-body h3 {
  font-size: 16.5px; font-weight: 700; color: #000000; margin: 24px 0 10px 0;
  scroll-margin-top: 20px; }
.wiki-body p {
  font-size: 14.5px; line-height: 1.75; color: #333; margin-bottom: 14px; }
.wiki-body ul, .wiki-body ol {
  margin: 0 0 16px 0; padding-left: 24px; }
.wiki-body li {
  font-size: 14.5px; line-height: 1.75; color: #333; margin-bottom: 6px; }
.wiki-body strong { color: #000; font-weight: 700; }
.wiki-body a { color: #7C5CFF; font-weight: 600; text-decoration: none; }
.wiki-body a:hover { text-decoration: underline; }

.wiki-callout {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 8px;
  margin: 20px 0; border-left: 4px solid; }
.wiki-callout i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.wiki-callout p { margin: 0; font-size: 13.5px; }
.wiki-callout.info { background: #EEF2FF; border-color: #7C5CFF; }
.wiki-callout.info i { color: #7C5CFF; }
.wiki-callout.warn { background: #FFF8E8; border-color: #FFB03A; }
.wiki-callout.warn i { color: #E09400; }
.wiki-callout.tip { background: #E8FBF5; border-color: #22C3A6; }
.wiki-callout.tip i { color: #159E85; }

.wiki-code-block {
  background: #1E1B2E; border-radius: 8px; padding: 16px 18px; margin: 18px 0;
  overflow-x: auto; }
.wiki-code-block code {
  font-family: var(--font-mono, monospace); font-size: 12.5px; color: #E4DFF7;
  white-space: pre; line-height: 1.6; }

.wiki-table-wrap { overflow-x: auto; margin: 18px 0; }
.wiki-table {
  width: 100%; border-collapse: collapse; font-size: 13px; }
.wiki-table th {
  background: #F5F3F9; color: #000; font-weight: 700; text-align: left;
  padding: 10px 12px; border: 1px solid #E1DDF2; }
.wiki-table td {
  padding: 10px 12px; border: 1px solid #E1DDF2; color: #333; }

.wiki-tags {
  display: flex; gap: 8px; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid #E1DDF2; flex-wrap: wrap; }
.wiki-tag {
  padding: 5px 12px; background: #F0EBF9; color: #7C5CFF; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; }

/* Right: TOC + Page Info panel */
.wiki-toc-panel {
  width: 260px; flex-shrink: 0; background: #FAFAFA; overflow-y: auto;
  padding: 20px 18px; }

.wiki-toc-section { margin-bottom: 24px; }
.wiki-toc-section-title {
  font-size: 10px; font-weight: 800; color: #999; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 12px; }

.wiki-toc-list { display: flex; flex-direction: column; gap: 2px; }
.wiki-toc-link {
  font-size: 12.5px; color: #666; font-weight: 600; padding: 5px 8px;
  border-radius: 5px; cursor: pointer; transition: all 0.15s;
  border-left: 2px solid transparent; }
.wiki-toc-link:hover { background: #F0EBF9; color: #7C5CFF; }
.wiki-toc-link.toc-h3 { padding-left: 20px; font-weight: 500; font-size: 12px; }

.wiki-contributors { display: flex; flex-direction: column; gap: 10px; }
.wiki-contributor { display: flex; align-items: center; gap: 8px; }
.wiki-contributor .wiki-author-avatar { width: 24px; height: 24px; font-size: 10px; }
.wiki-contributor-name { font-size: 12px; font-weight: 600; color: #333; }

.wiki-related-list { display: flex; flex-direction: column; gap: 8px; }
.wiki-related-item {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: #555; font-weight: 600; cursor: pointer; padding: 6px 8px;
  border-radius: 6px; transition: all 0.15s; }
.wiki-related-item:hover { background: #F0EBF9; color: #7C5CFF; }
.wiki-related-item i { color: #BBB; font-size: 12px; flex-shrink: 0; }

/* ---------- Development Lifecycle (Kanban board) ---------- */
#devlc { flex-direction: column; background: #FFFFFF; }

.devlc-layout {
  display: flex; height: 100%; background: #FFFFFF; }

.devlc-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid #E1DDF2; }

.devlc-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid #E1DDF2; gap: 16px; flex-wrap: wrap; }
.devlc-toolbar-title h2 {
  margin: 0 0 2px 0; font-size: 19px; font-weight: 800; color: #000000; }
.devlc-toolbar-title .hint { font-size: 12.5px; color: #999; font-weight: 600; }
.devlc-toolbar-actions { display: flex; gap: 10px; align-items: center; }

.devlc-search { position: relative; }
.devlc-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #AAA; font-size: 13px; }
.devlc-search input {
  padding: 8px 12px 8px 32px; border: 1px solid #E1DDF2; border-radius: 8px;
  font-size: 12.5px; width: 200px; outline: none; transition: all 0.2s; }
.devlc-search input:focus { border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124,92,255,.12); }

.devlc-new-btn {
  padding: 9px 16px; background: #7C5CFF; color: white; border: none;
  border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; transition: all 0.2s; white-space: nowrap; }
.devlc-new-btn:hover { background: #6B47E0; }

.devlc-board {
  flex: 1; display: flex; gap: 16px; padding: 20px 24px; overflow-x: auto; overflow-y: hidden; }

.devlc-column {
  width: 272px; flex-shrink: 0; display: flex; flex-direction: column;
  background: #FAFAFC; border-radius: 12px; border: 1px solid #EFEBFA; max-height: 100%; }
.devlc-column.drag-over { background: #F0EBF9; border-color: #7C5CFF; }

.devlc-column-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid #EFEBFA; flex-shrink: 0; }
.devlc-column-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.devlc-column-dot.backlog { background: #999; }
.devlc-column-dot.inprogress { background: #FFB03A; }
.devlc-column-dot.inreview { background: #2563EB; }
.devlc-column-dot.done { background: #22C3A6; }
.devlc-column-title {
  font-size: 12.5px; font-weight: 800; color: #000000; flex: 1; }
.devlc-column-count {
  font-size: 11px; font-weight: 700; color: #999; background: white;
  padding: 2px 8px; border-radius: 999px; border: 1px solid #E1DDF2; }

.devlc-column-body {
  flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px;
  min-height: 80px; }

.devlc-card {
  background: white; border: 1px solid #E1DDF2; border-radius: 10px;
  padding: 12px 14px; cursor: grab; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.devlc-card:hover { border-color: #7C5CFF; box-shadow: 0 4px 12px rgba(124,92,255,.12); transform: translateY(-1px); }
.devlc-card.dragging { opacity: 0.4; }
.devlc-card-id {
  font-size: 10.5px; font-weight: 800; color: #7C5CFF; margin-bottom: 5px;
  letter-spacing: 0.3px; }
.devlc-card-title {
  font-size: 13px; font-weight: 700; color: #000000; line-height: 1.4; margin-bottom: 10px; }
.devlc-card-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.devlc-chip {
  font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.3px; }
.devlc-chip.feat { background: #EEF2FF; color: #7C5CFF; }
.devlc-chip.bug { background: #FFEBEE; color: #DC2626; }
.devlc-chip.chore { background: #F1F5F9; color: #64748B; }

.devlc-due-chip {
  font-size: 10.5px; font-weight: 700; color: #777; display: flex;
  align-items: center; gap: 3px; }
.devlc-due-chip.overdue { color: #DC2626; }

.devlc-card-avatar {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  background: #7C5CFF; color: white; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.devlc-add-card-btn {
  margin: 0 10px 10px 10px; padding: 8px; background: transparent;
  border: 1px dashed #C9BFEF; border-radius: 8px; color: #7C5CFF;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.devlc-add-card-btn:hover { background: #F0EBF9; }

/* Right: Release panel */
.devlc-release-panel {
  width: 300px; flex-shrink: 0; background: #FAFAFA; padding: 18px;
  overflow-y: auto; display: flex; flex-direction: column; }

.devlc-release-header { margin-bottom: 16px; }
.devlc-release-label {
  font-size: 10px; font-weight: 800; color: #999; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px; }
.devlc-release-select {
  width: 100%; padding: 9px 10px; border: 1px solid #E1DDF2; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #000; background: white; outline: none; }
.devlc-release-select:focus { border-color: #7C5CFF; }

.devlc-release-progress-block { margin-bottom: 14px; }
.devlc-progress-row {
  display: flex; justify-content: space-between; font-size: 11.5px;
  font-weight: 700; color: #666; margin-bottom: 6px; }
.devlc-progress-track {
  height: 7px; background: #E9E4F7; border-radius: 999px; overflow: hidden; }
.devlc-progress-bar {
  height: 100%; background: #7C5CFF; border-radius: 999px; transition: width 0.3s; }
.devlc-progress-bar.story { background: #22C3A6; }

.devlc-checkpoint-list {
  flex: 1; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
  padding-top: 6px; border-top: 1px solid #E1DDF2; }
.devlc-checkpoint-row {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 6px;
  border-radius: 8px; transition: background 0.15s; }
.devlc-checkpoint-row:hover { background: #F0EBF9; }
.devlc-checkpoint-row input[type="checkbox"] {
  margin-top: 3px; width: 15px; height: 15px; accent-color: #7C5CFF; cursor: pointer; flex-shrink: 0; }
.devlc-checkpoint-body { flex: 1; min-width: 0; }
.devlc-checkpoint-label {
  font-size: 12.5px; font-weight: 700; color: #333; line-height: 1.4; }
.devlc-checkpoint-row.done .devlc-checkpoint-label {
  color: #999; text-decoration: line-through; }
.devlc-checkpoint-story {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  cursor: pointer; }
.devlc-checkpoint-story.is-done { background: #E8FBF5; color: #159E85; }
.devlc-checkpoint-story.is-pending { background: #FFF8E8; color: #E09400; }

.devlc-add-checkpoint-btn {
  padding: 9px 12px; background: transparent; border: 1px dashed #C9BFEF;
  border-radius: 8px; color: #7C5CFF; font-size: 12.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 6px; transition: all 0.2s; }
.devlc-add-checkpoint-btn:hover { background: #F0EBF9; border-color: #7C5CFF; }

/* Story detail — Jira-style right-side slide-in drawer */
.devlc-story-drawer {
  position: fixed; inset: 0; z-index: 1050; pointer-events: none; }
.devlc-story-drawer.open { pointer-events: auto; }

.devlc-story-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(20, 15, 40, 0.18);
  opacity: 0; transition: opacity 0.25s ease; }
.devlc-story-drawer.open .devlc-story-drawer-backdrop { opacity: 1; }

.devlc-story-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw;
  background: white; box-shadow: -12px 0 36px rgba(20, 15, 40, 0.16);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(.16,1,.3,1); }
.devlc-story-drawer.open .devlc-story-drawer-panel { transform: translateX(0); }

.devlc-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #E1DDF2; flex-shrink: 0; }
.devlc-drawer-id {
  font-size: 12.5px; font-weight: 800; color: #7C5CFF; letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 7px; }
.devlc-drawer-header-actions { display: flex; gap: 6px; }
.devlc-drawer-icon-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E1DDF2;
  background: white; color: #666; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.devlc-drawer-icon-btn:hover { background: #F0EBF9; border-color: #7C5CFF; color: #7C5CFF; }

.devlc-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }

.devlc-drawer-title {
  width: 100%; font-size: 21px; font-weight: 800; color: #000000; line-height: 1.35;
  border: none; outline: none; padding: 4px 0 8px 0; margin-bottom: 12px;
  border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.devlc-drawer-title:focus { border-bottom-color: #7C5CFF; }

.devlc-status-select {
  appearance: none; -webkit-appearance: none; border: none; outline: none;
  padding: 7px 30px 7px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; margin-bottom: 20px;
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.devlc-status-select.backlog { background-color: #999; color: white; }
.devlc-status-select.inprogress { background-color: #FFB03A; color: white; }
.devlc-status-select.inreview { background-color: #2563EB; color: white; }
.devlc-status-select.done { background-color: #22C3A6; color: white; }

.devlc-drawer-section { margin-bottom: 22px; }
.devlc-drawer-section-title {
  font-size: 10px; font-weight: 800; color: #999; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 10px; }

.devlc-drawer-field-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid #F1EEFA; }
.devlc-drawer-field-row label {
  width: 90px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #999; }
.devlc-drawer-field-row input,
.devlc-drawer-field-row select {
  flex: 1; border: none; outline: none; font-size: 13px; font-weight: 600;
  color: #000; background: transparent; padding: 4px 6px; border-radius: 5px;
  transition: background 0.15s; }
.devlc-drawer-field-row input:hover, .devlc-drawer-field-row select:hover,
.devlc-drawer-field-row input:focus, .devlc-drawer-field-row select:focus { background: #F5F3F9; }
.devlc-drawer-field-row .devlc-drawer-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: #7C5CFF; color: white;
  font-size: 10px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; }

.devlc-drawer-description {
  min-height: 90px; border: 1px solid #E1DDF2; border-radius: 8px; padding: 12px 14px;
  font-size: 13px; line-height: 1.6; color: #333; outline: none; transition: border-color 0.2s; }
.devlc-drawer-description:focus { border-color: #7C5CFF; }
.devlc-drawer-description:empty::before {
  content: attr(data-placeholder); color: #AAA; }

.devlc-drawer-checkpoint-badge {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 6px 0;
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.devlc-drawer-checkpoint-badge.is-done { background: #E8FBF5; color: #159E85; }
.devlc-drawer-checkpoint-badge.is-pending { background: #FFF8E8; color: #E09400; }
.devlc-drawer-empty-hint { font-size: 12px; color: #AAA; font-weight: 600; }

/* ---------- Incidents (incident management & tracking) ---------- */
#incidents { flex-direction: column; background: #FFFFFF; }

.incidents-layout {
  display: flex; flex-direction: column; height: 100%; background: #FFFFFF; }

/* Metrics bar */
.incidents-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 18px 24px; border-bottom: 1px solid #E1DDF2; flex-shrink: 0; }
.incident-stat-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid #E1DDF2; background: #FAFAFC; }
.incident-stat-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.incident-stat-card.danger .incident-stat-icon { background: #FFEBEE; color: #DC2626; }
.incident-stat-card.ok .incident-stat-icon { background: #E8FBF5; color: #159E85; }
.incident-stat-card.neutral .incident-stat-icon { background: #EEF2FF; color: #7C5CFF; }
.incident-stat-value { font-size: 21px; font-weight: 800; color: #000000; line-height: 1.2; }
.incident-stat-label { font-size: 11.5px; font-weight: 700; color: #999; margin-top: 2px; }

/* Toolbar */
.incidents-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px; border-bottom: 1px solid #E1DDF2; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }
.incidents-status-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.incidents-status-tab {
  padding: 7px 14px; border-radius: 999px; border: 1px solid #E1DDF2; background: white;
  color: #666; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.incidents-status-tab:hover { border-color: #7C5CFF; color: #7C5CFF; }
.incidents-status-tab.active { background: #7C5CFF; border-color: #7C5CFF; color: white; }

.incidents-toolbar-actions { display: flex; gap: 10px; align-items: center; }
.incidents-search { position: relative; }
.incidents-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #AAA; font-size: 13px; }
.incidents-search input {
  padding: 8px 12px 8px 32px; border: 1px solid #E1DDF2; border-radius: 8px;
  font-size: 12.5px; width: 190px; outline: none; transition: all 0.2s; }
.incidents-search input:focus { border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124,92,255,.12); }

.incidents-new-btn {
  padding: 9px 16px; background: #7C5CFF; color: white; border: none; border-radius: 8px;
  cursor: pointer; font-size: 12.5px; font-weight: 700; display: flex; align-items: center;
  gap: 6px; transition: all 0.2s; white-space: nowrap; }
.incidents-new-btn:hover { background: #6B47E0; }

/* Split: list + detail */
.incidents-split { flex: 1; display: flex; min-height: 0; }

.incidents-list {
  width: 360px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid #E1DDF2; background: #FAFAFC; }
.incidents-empty {
  padding: 60px 20px; text-align: center; color: #AAA; }
.incidents-empty i { font-size: 32px; opacity: 0.4; margin-bottom: 10px; display: block; }
.incidents-empty p { font-size: 12.5px; font-weight: 600; margin: 0; }

.incident-row {
  padding: 13px 16px; border-bottom: 1px solid #EFEBFA; cursor: pointer;
  border-left: 4px solid transparent; transition: all 0.15s; background: white; }
.incident-row:hover { background: #F5F3F9; }
.incident-row.active { background: #F0EBF9; }
.incident-row-top { display: flex; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
.incident-sev-chip, .incident-status-chip {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.incident-row-title {
  font-size: 13px; font-weight: 700; color: #000000; line-height: 1.4; margin-bottom: 7px; }
.incident-row-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #999; font-weight: 600; }
.incident-row-dot { color: #CCC; }
.incident-row-avatar {
  width: 20px; height: 20px; border-radius: 50%; background: #7C5CFF; color: white;
  font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Detail panel */
.incidents-detail { flex: 1; overflow-y: auto; padding: 24px 32px 60px 32px; min-width: 0; }
.incidents-detail-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #AAA; gap: 10px; }
.incidents-detail-empty i { font-size: 40px; opacity: 0.35; }
.incidents-detail-empty p { font-size: 13px; font-weight: 600; margin: 0; }

.incident-detail-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.incident-detail-id { font-size: 12px; font-weight: 800; color: #7C5CFF; letter-spacing: 0.3px; }
.incident-icon-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E1DDF2; background: white;
  color: #666; cursor: pointer; font-size: 13px; display: flex; align-items: center;
  justify-content: center; transition: all 0.2s; }
.incident-icon-btn:hover { background: #FFEBEE; border-color: #DC2626; color: #DC2626; }

.incident-detail-title {
  width: 100%; font-size: 24px; font-weight: 800; color: #000000; line-height: 1.3;
  border: none; outline: none; padding: 2px 0 8px 0; margin-bottom: 12px;
  border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.incident-detail-title:focus { border-bottom-color: #7C5CFF; }

.incident-badges-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.incident-sev-select {
  appearance: none; -webkit-appearance: none; border: none; outline: none; color: white;
  padding: 7px 28px 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; cursor: pointer;
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.incident-status-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; }
.incident-duration-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: #F5F3F9; color: #666; }

.incident-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.incident-meta-field label {
  display: block; font-size: 10px; font-weight: 800; color: #999; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 7px; }
.incident-meta-value-row { display: flex; align-items: center; gap: 8px; }
.incident-meta-value-row input {
  flex: 1; border: none; outline: none; font-size: 13px; font-weight: 700; color: #000;
  background: transparent; padding: 4px 6px; border-radius: 5px; transition: background 0.15s; }
.incident-meta-value-row input:hover, .incident-meta-value-row input:focus { background: #F5F3F9; }
.incident-meta-static { font-size: 13px; font-weight: 700; color: #333; padding: 4px 0; }

.incident-services-field, .incident-description-field, .incident-rootcause-field { margin-bottom: 20px; }
.incident-services-field label, .incident-description-field label, .incident-rootcause-field label {
  display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; color: #999;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 9px; }
.incident-rootcause-hint { text-transform: none; letter-spacing: 0; color: #C9A227; font-weight: 600; font-size: 10.5px; }

.incident-service-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.incident-service-tag {
  padding: 6px 13px; border-radius: 999px; border: 1px solid #E1DDF2; background: white;
  color: #666; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.incident-service-tag:hover { border-color: #7C5CFF; color: #7C5CFF; }
.incident-service-tag.active { background: #7C5CFF; border-color: #7C5CFF; color: white; }

.incident-description-box, .incident-rootcause-box {
  min-height: 64px; border: 1px solid #E1DDF2; border-radius: 8px; padding: 12px 14px;
  font-size: 13px; line-height: 1.6; color: #333; outline: none; transition: border-color 0.2s; }
.incident-description-box:focus, .incident-rootcause-box:focus { border-color: #7C5CFF; }
.incident-description-box:empty::before, .incident-rootcause-box:empty::before {
  content: attr(data-placeholder); color: #AAA; }
.incident-rootcause-box { background: #FFFCF3; border-color: #F5E7B8; }

.incident-update-composer {
  background: #FAFAFC; border: 1px solid #E1DDF2; border-radius: 10px; padding: 14px 16px; margin-bottom: 24px; }
.incident-update-composer label {
  display: block; font-size: 10px; font-weight: 800; color: #999; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 9px; }
.incident-composer-row { display: flex; gap: 8px; margin-bottom: 8px; }
.incident-composer-row select {
  padding: 8px 10px; border: 1px solid #E1DDF2; border-radius: 6px; font-size: 12.5px;
  font-weight: 700; color: #000; background: white; outline: none; }
.incident-post-btn {
  margin-left: auto; padding: 8px 16px; background: #7C5CFF; color: white; border: none;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; display: flex;
  align-items: center; gap: 6px; transition: all 0.2s; }
.incident-post-btn:hover { background: #6B47E0; }
.incident-update-composer textarea {
  width: 100%; border: 1px solid #E1DDF2; border-radius: 6px; padding: 9px 11px;
  font-size: 12.5px; font-family: inherit; resize: vertical; outline: none; transition: border-color 0.2s; }
.incident-update-composer textarea:focus { border-color: #7C5CFF; }

.incident-timeline { margin-bottom: 24px; }
.incident-timeline-item { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.incident-timeline-item:not(:last-child)::before {
  content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: #EFEBFA; }
.incident-timeline-marker {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  box-shadow: 0 0 0 3px white; z-index: 1; }
.incident-timeline-content { flex: 1; min-width: 0; }
.incident-timeline-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.incident-timeline-status { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.incident-timeline-time { font-size: 11px; color: #AAA; font-weight: 600; }
.incident-timeline-message { font-size: 13px; color: #333; line-height: 1.6; margin-bottom: 6px; }
.incident-timeline-author { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #999; font-weight: 700; }

/* ---------- Automations (workflow rules engine) ---------- */
#automations { flex-direction: column; background: #FFFFFF; }
.autom-layout { display: flex; flex-direction: column; height: 100%; background: #FFFFFF; overflow-y: auto; }

.autom-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 18px 24px; border-bottom: 1px solid #E1DDF2; flex-shrink: 0; }

.autom-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px; border-bottom: 1px solid #E1DDF2; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }
.autom-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.autom-filter-tab {
  padding: 7px 14px; border-radius: 999px; border: 1px solid #E1DDF2; background: white;
  color: #666; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.autom-filter-tab:hover { border-color: #7C5CFF; color: #7C5CFF; }
.autom-filter-tab.active { background: #7C5CFF; border-color: #7C5CFF; color: white; }

.autom-toolbar-actions { display: flex; gap: 10px; align-items: center; }
.autom-search { position: relative; }
.autom-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #AAA; font-size: 13px; }
.autom-search input {
  padding: 8px 12px 8px 32px; border: 1px solid #E1DDF2; border-radius: 8px;
  font-size: 12.5px; width: 190px; outline: none; transition: all 0.2s; }
.autom-search input:focus { border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124,92,255,.12); }
.autom-new-btn {
  padding: 9px 16px; background: #7C5CFF; color: white; border: none; border-radius: 8px;
  cursor: pointer; font-size: 12.5px; font-weight: 700; display: flex; align-items: center;
  gap: 6px; transition: all 0.2s; white-space: nowrap; }
.autom-new-btn:hover { background: #6B47E0; }

.autom-view-switch { display: flex; gap: 4px; border: 1px solid #E1DDF2; border-radius: 8px; padding: 3px; }
.autom-view-btn {
  width: 30px; height: 28px; border-radius: 6px; border: none; background: transparent;
  color: #999; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; }
.autom-view-btn:hover { background: #F0EBF9; color: #7C5CFF; }
.autom-view-btn.active { background: #7C5CFF; color: white; }

.autom-list { padding: 16px 24px 40px 24px; display: flex; flex-direction: column; gap: 12px; }
.autom-empty { padding: 60px 20px; text-align: center; color: #AAA; }
.autom-empty i { font-size: 32px; opacity: 0.4; margin-bottom: 10px; display: block; }

/* List view */
.autom-list.autom-view-list { gap: 0; }
.autom-list-table { display: flex; flex-direction: column; border: 1px solid #E1DDF2; border-radius: 10px; overflow: hidden; }
.autom-list-row {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: white;
  border-bottom: 1px solid #F1EEFA; cursor: pointer; transition: background 0.15s; }
.autom-list-row:last-child { border-bottom: none; }
.autom-list-row:hover { background: #F5F3F9; }
.autom-list-row.paused { opacity: 0.55; }
.autom-list-name-col { flex: 1.4; min-width: 0; }
.autom-list-name { font-size: 13px; font-weight: 800; color: #000; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.autom-list-trigger { font-size: 11px; color: #7C5CFF; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.autom-list-actions-col { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.autom-list-action-icon {
  width: 26px; height: 26px; border-radius: 6px; background: #E8FBF5; color: #159E85;
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.autom-list-runs-col { flex: 0.8; font-size: 11.5px; color: #999; font-weight: 600; white-space: nowrap; }
.autom-list-last-col { flex: 1; font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* Board view (grouped by trigger) */
.autom-board { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.autom-board-col { width: 240px; flex-shrink: 0; background: #FAFAFC; border: 1px solid #EFEBFA; border-radius: 12px; padding: 12px; }
.autom-board-col-header {
  font-size: 12px; font-weight: 800; color: #000; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.autom-board-col-header i { color: #7C5CFF; }
.autom-board-col-count {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: #999; background: white;
  border: 1px solid #E1DDF2; border-radius: 999px; padding: 1px 7px; }
.autom-board-col-body { display: flex; flex-direction: column; gap: 8px; }
.autom-board-empty { font-size: 11.5px; color: #BBB; font-weight: 600; text-align: center; padding: 14px 0; }

.autom-board-card {
  background: white; border: 1px solid #E1DDF2; border-radius: 10px; padding: 11px 12px; cursor: pointer;
  transition: all 0.15s; }
.autom-board-card:hover { border-color: #7C5CFF; box-shadow: 0 3px 10px rgba(124,92,255,.10); }
.autom-board-card.paused { opacity: 0.55; }
.autom-board-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.autom-board-card-name { font-size: 12.5px; font-weight: 700; color: #000; line-height: 1.35; }
.autom-board-card-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.autom-board-card-noaction { font-size: 10.5px; color: #BBB; font-style: italic; }
.autom-board-card-last { font-size: 10.5px; color: #999; font-weight: 600; display: flex; align-items: center; gap: 4px; }

.autom-flow-chip.sm { padding: 3px 8px; font-size: 10.5px; }
.autom-toggle.sm { width: 32px; height: 18px; flex-shrink: 0; }
.autom-toggle.sm::after { width: 14px; height: 14px; }
.autom-toggle.sm.on::after { transform: translateX(14px); }

.autom-card {
  border: 1px solid #E1DDF2; border-radius: 12px; padding: 16px 18px; background: white;
  cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 12px; }
.autom-card:hover { border-color: #7C5CFF; box-shadow: 0 4px 14px rgba(124,92,255,.10); }
.autom-card.paused { opacity: 0.6; }

.autom-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.autom-card-name { font-size: 14.5px; font-weight: 800; color: #000; margin-bottom: 4px; }
.autom-card-desc { font-size: 12.5px; color: #777; font-weight: 500; line-height: 1.5; }

.autom-toggle {
  position: relative; width: 40px; height: 22px; flex-shrink: 0; border-radius: 999px;
  background: #DDD; cursor: pointer; transition: background 0.2s; border: none; }
.autom-toggle.on { background: #22C3A6; }
.autom-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: white; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.autom-toggle.on::after { transform: translateX(18px); }

.autom-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.autom-flow-chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700; }
.autom-flow-chip.trigger { background: #EEF2FF; color: #7C5CFF; }
.autom-flow-chip.action { background: #E8FBF5; color: #159E85; }
.autom-flow-arrow { color: #CCC; font-size: 14px; }

.autom-card-bottom {
  display: flex; align-items: center; gap: 14px; padding-top: 10px; border-top: 1px solid #F1EEFA;
  font-size: 11.5px; color: #999; font-weight: 600; }
.autom-run-status { display: flex; align-items: center; gap: 5px; }
.autom-run-status.success { color: #159E85; }
.autom-run-status.fail { color: #DC2626; }
.autom-run-status.none { color: #AAA; }

/* Automation drawer body */
.autom-drawer-name {
  width: 100%; font-size: 21px; font-weight: 800; color: #000; line-height: 1.3;
  border: none; outline: none; padding: 2px 0 8px 0; margin-bottom: 6px;
  border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.autom-drawer-name:focus { border-bottom-color: #7C5CFF; }
.autom-drawer-desc {
  width: 100%; border: none; outline: none; font-size: 12.5px; color: #777; font-weight: 500;
  resize: none; margin-bottom: 18px; padding: 0; background: transparent; font-family: inherit; }
.autom-drawer-new-hint {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px;
  background: #F0EBF9; color: #7C5CFF; border-radius: 8px; font-size: 12px; font-weight: 700; }
.autom-drawer-new-hint i { font-size: 14px; }

.autom-drawer-toggle-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;
  padding: 10px 14px; background: #FAFAFC; border-radius: 8px; border: 1px solid #E1DDF2; }
.autom-drawer-toggle-label { font-size: 12.5px; font-weight: 700; color: #333; }

.autom-drawer-section { margin-bottom: 22px; }
.autom-drawer-section-title {
  font-size: 10px; font-weight: 800; color: #999; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.autom-drawer-section-count {
  background: #F0EBF9; color: #7C5CFF; border-radius: 999px; padding: 1px 7px;
  font-size: 10px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.autom-drawer-select {
  width: 100%; padding: 9px 10px; border: 1px solid #E1DDF2; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: #000; background: white; outline: none; }
.autom-drawer-select:focus { border-color: #7C5CFF; }
.autom-drawer-select-hint {
  font-size: 11px; color: #999; font-weight: 500; margin-top: 7px; line-height: 1.5; }
.autom-drawer-empty-hint {
  font-size: 12px; color: #AAA; font-weight: 600; padding: 10px 0; }

.autom-action-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #E1DDF2;
  border-radius: 8px; margin-bottom: 8px; background: #FAFAFC; }
.autom-action-item i.autom-action-icon { color: #159E85; font-size: 14px; flex-shrink: 0; }
.autom-action-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.autom-action-item-body span:first-child { font-size: 12.5px; font-weight: 700; color: #333; }
.autom-action-item-hint { font-size: 10.5px; color: #999; font-weight: 500; }
.autom-action-remove {
  width: 22px; height: 22px; border-radius: 5px; border: none; background: transparent;
  color: #999; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.autom-action-remove:hover { background: #FFEBEE; color: #DC2626; }
.autom-add-action-btn {
  width: 100%; padding: 9px; background: transparent; border: 1px dashed #C9BFEF; border-radius: 8px;
  color: #7C5CFF; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.autom-add-action-btn:hover { background: #F0EBF9; }

.autom-test-run-btn {
  width: 100%; padding: 10px; background: #7C5CFF; color: white; border: none; border-radius: 8px;
  cursor: pointer; font-size: 12.5px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; gap: 7px; transition: all 0.2s; margin-bottom: 22px; }
.autom-test-run-btn:hover { background: #6B47E0; }

.autom-history-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F1EEFA;
  font-size: 12px; }
.autom-history-icon { font-size: 13px; flex-shrink: 0; }
.autom-history-icon.success { color: #159E85; }
.autom-history-icon.fail { color: #DC2626; }
.autom-history-body { flex: 1; min-width: 0; }
.autom-history-event { font-weight: 700; color: #333; }
.autom-history-time { color: #AAA; font-size: 11px; }
.autom-history-duration { color: #999; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.autom-history-empty { font-size: 12px; color: #AAA; font-weight: 600; }

/* ---------- Monitoring (service health & observability) ---------- */
#monitoring { flex-direction: column; background: #FFFFFF; }
.mon-layout { display: flex; flex-direction: column; height: 100%; overflow-y: auto; background: #FFFFFF; padding: 24px; gap: 26px; }

.mon-status-banner {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 800; }
.mon-status-banner.operational { background: #E8FBF5; color: #159E85; }
.mon-status-banner.degraded { background: #FFF8E8; color: #E09400; }
.mon-status-banner.outage { background: #FFEBEE; color: #DC2626; }
.mon-status-banner.info { background: var(--accent-soft); color: var(--accent); }
.mon-status-banner i { font-size: 18px; }
.mon-status-banner-sub { font-size: 12px; font-weight: 600; opacity: 0.75; margin-left: auto; }

.mon-section-title {
  font-size: 12.5px; font-weight: 800; color: #000; text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 12px; }

.mon-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mon-service-card { border: 1px solid #E1DDF2; border-radius: 12px; padding: 16px; background: #FAFAFC; }
.mon-service-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mon-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mon-status-dot.healthy { background: #22C3A6; box-shadow: 0 0 0 3px rgba(34,195,166,.18); }
.mon-status-dot.degraded { background: #FFB03A; box-shadow: 0 0 0 3px rgba(255,176,58,.18); }
.mon-status-dot.down { background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.mon-service-name { font-size: 13.5px; font-weight: 800; color: #000; flex: 1; }
.mon-service-status-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.mon-service-stats { display: flex; gap: 18px; margin-bottom: 12px; }
.mon-service-stat-value { font-size: 15px; font-weight: 800; color: #000; }
.mon-service-stat-label { font-size: 10px; color: #999; font-weight: 700; text-transform: uppercase; }
.mon-uptime-bar { display: flex; gap: 2px; height: 22px; }
.mon-uptime-seg { flex: 1; border-radius: 2px; }
.mon-uptime-seg.up { background: #22C3A6; }
.mon-uptime-seg.minor { background: #FFB03A; }
.mon-uptime-seg.down { background: #DC2626; }

.mon-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mon-metric-card { border: 1px solid #E1DDF2; border-radius: 12px; padding: 16px; background: white; }
.mon-metric-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mon-metric-label { font-size: 11.5px; font-weight: 700; color: #999; }
.mon-metric-trend { font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 3px; }
.mon-metric-trend.up { color: #DC2626; }
.mon-metric-trend.down { color: #159E85; }
.mon-metric-value { font-size: 24px; font-weight: 800; color: #000; margin-bottom: 10px; }
.mon-sparkline { height: 34px; display: flex; align-items: flex-end; gap: 3px; }
.mon-sparkline-bar { flex: 1; background: #7C5CFF; opacity: .35; border-radius: 2px 2px 0 0; transition: height 0.4s ease; }

.mon-alerts-section { flex: 1; }
.mon-alerts-list { display: flex; flex-direction: column; gap: 2px; }
.mon-alert-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #F1EEFA; }
.mon-alert-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 13px; }
.mon-alert-icon.warn { background: #FFF8E8; color: #E09400; }
.mon-alert-icon.danger { background: #FFEBEE; color: #DC2626; }
.mon-alert-icon.info { background: #EEF2FF; color: #7C5CFF; }
.mon-alert-body { flex: 1; min-width: 0; }
.mon-alert-msg { font-size: 12.5px; font-weight: 700; color: #333; margin-bottom: 3px; }
.mon-alert-meta { font-size: 11px; color: #999; font-weight: 600; }

/* ---------- Analytics (BI dashboard) ---------- */
#analytics { flex-direction: column; background: #FFFFFF; }
.an-layout { height: 100%; overflow-y: auto; background: #FFFFFF; padding: 24px; }

.an-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 14px; }
.an-toolbar-title h2 { margin: 0 0 2px 0; font-size: 19px; font-weight: 800; color: #000; }
.an-toolbar-title .hint { font-size: 12.5px; color: #999; font-weight: 600; }
.an-range-tabs { display: flex; gap: 4px; }
.an-range-tab {
  padding: 7px 14px; border-radius: 999px; border: 1px solid #E1DDF2; background: white;
  color: #666; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.an-range-tab:hover { border-color: #7C5CFF; color: #7C5CFF; }
.an-range-tab.active { background: #7C5CFF; border-color: #7C5CFF; color: white; }

.an-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.an-kpi-card { border: 1px solid #E1DDF2; border-radius: 12px; padding: 16px 18px; background: #FAFAFC; }
.an-kpi-label { font-size: 11.5px; font-weight: 700; color: #999; margin-bottom: 8px; }
.an-kpi-value { font-size: 25px; font-weight: 800; color: #000; margin-bottom: 6px; }
.an-kpi-delta { font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.an-kpi-delta.up { color: #159E85; }
.an-kpi-delta.down { color: #DC2626; }

.an-charts-row { display: flex; gap: 16px; margin-bottom: 16px; }
.an-chart-card { flex: 1; border: 1px solid #E1DDF2; border-radius: 12px; padding: 18px; background: white; min-width: 0; }
.an-chart-wide { flex: 2; }
.an-chart-title { font-size: 12.5px; font-weight: 800; color: #000; margin-bottom: 14px; }

.an-leaderboard { display: flex; flex-direction: column; gap: 4px; }
.an-leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; }
.an-leaderboard-rank {
  width: 20px; font-size: 12px; font-weight: 800; color: #AAA; flex-shrink: 0; text-align: center; }
.an-leaderboard-row:nth-child(1) .an-leaderboard-rank { color: #FFB03A; }
.an-leaderboard-row:nth-child(2) .an-leaderboard-rank { color: #999; }
.an-leaderboard-row:nth-child(3) .an-leaderboard-rank { color: #C97A40; }
.an-leaderboard-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #7C5CFF; color: white;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.an-leaderboard-info { flex: 1; min-width: 0; }
.an-leaderboard-name { font-size: 12.5px; font-weight: 700; color: #000; }
.an-leaderboard-meta { font-size: 10.5px; color: #999; font-weight: 600; }
.an-leaderboard-value { font-size: 13px; font-weight: 800; color: #7C5CFF; flex-shrink: 0; }

/* ---------- Notepad (Notepad++-style multi-tab editor) ---------- */
.npp { flex: 1; display: flex; flex-direction: column; height: 100%; background: #FFFFFF;
  --npp-font-size: 13px; --npp-line-height: 20px; }

.npp-toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFE 100%); flex-shrink: 0; }
.npp-toolbar-group { display: flex; align-items: center; gap: 2px; }
.npp-toolbar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.npp-tbtn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; transition: all var(--duration-base) var(--ease-out); }
.npp-tbtn:hover { background: var(--accent-soft); color: var(--accent); }
.npp-tbtn.active { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.npp-zoom-label { width: auto; min-width: 38px; font-size: 11.5px; font-weight: 700; padding: 0 4px; }

.npp-tabbar { display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--border);
  background: var(--surface); overflow-x: auto; overflow-y: hidden; flex-shrink: 0; }
.npp-tabbar::-webkit-scrollbar { height: 4px; }
.npp-tab { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 8px 8px 0 0;
  background: #EFEBFA; color: var(--text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer;
  max-width: 180px; min-width: 110px; border: 1px solid transparent; border-bottom: none; white-space: nowrap;
  transition: background var(--duration-base) var(--ease-out); }
.npp-tab:hover { background: #E6E0F7; }
.npp-tab.active { background: #FFFFFF; color: #000000; border-color: var(--border); position: relative; top: 1px; }
.npp-tab-icon { font-size: 13px; color: var(--accent); flex-shrink: 0; }
.npp-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.npp-tab-name-input { border: 1px solid var(--m3-primary); border-radius: 4px; font: inherit; width: 100%;
  padding: 1px 4px; min-width: 0; }
.npp-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex-shrink: 0; opacity: 0;
  transition: opacity .15s; }
.npp-tab-dot.show { opacity: 1; }
.npp-tab-close { width: 18px; height: 18px; border-radius: 4px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; transition: all var(--duration-base); }
.npp-tab-close:hover { background: #FFEBEE; color: #DC2626; }
.npp-tab-add { width: 28px; height: 28px; margin-bottom: 4px; border-radius: 6px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.npp-tab-add:hover { background: var(--accent-soft); color: var(--accent); }

.npp-findbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: #FFF8E1; flex-shrink: 0; }
.npp-findbar input { border: 1px solid #E1DDF2; border-radius: 6px; padding: 6px 10px; font-size: 12.5px; width: 200px;
  outline: none; background: #FFFFFF; color: #000; }
.npp-findbar input:focus { border-color: var(--m3-primary); }
.npp-findbar button { padding: 6px 10px; border-radius: 6px; border: 1px solid #E1DDF2; background: white; color: #333;
  font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.npp-findbar button:hover { border-color: #7C5CFF; color: #7C5CFF; }
.npp-find-status { font-size: 11.5px; color: var(--text-muted); margin-left: 2px; white-space: nowrap; }
.npp-find-close { margin-left: auto; border: none !important; }

.npp-editor-wrap { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.npp-gutter { width: 50px; flex-shrink: 0; background: #FAFAFE; border-right: 1px solid var(--border);
  overflow: hidden; padding: 10px 0; box-sizing: border-box; user-select: none; }
.npp-gutter-row { height: var(--npp-line-height); line-height: var(--npp-line-height); font-size: var(--npp-font-size);
  font-family: 'Consolas', 'Courier New', monospace; text-align: right; padding-right: 10px; color: #A79FCB; }
.npp-textarea { flex: 1; border: none; outline: none; resize: none; padding: 10px 16px; box-sizing: border-box;
  font-family: 'Consolas', 'Courier New', monospace; font-size: var(--npp-font-size); line-height: var(--npp-line-height);
  color: #1a1a1a; white-space: pre; overflow: auto; background: #FFFFFF; tab-size: 4; }
.npp-textarea.wrap { white-space: pre-wrap; word-break: break-word; }
.npp-textarea::placeholder { color: var(--text-muted); font-family: var(--font-sans); }

.npp-statusbar { display: flex; align-items: center; gap: 18px; padding: 6px 16px; border-top: 1px solid var(--border);
  background: var(--surface); font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }
.npp-statusbar span { white-space: nowrap; }
.npp-stat-sep { flex: 1; }
.npp-stat-eol select { border: none; background: transparent; color: var(--text-muted); font-size: 11.5px;
  font-weight: 700; cursor: pointer; outline: none; }

/* ---------- Print (word docs, wiki pages) ---------- */
@media print {
  .app-sidebar, .app-rightbar, .app-topbar, .editor-topbar, .wordeditor-toolbar,
  .modal-backdrop, .offcanvas, .present-overlay, .save-state { display: none !important; }
  body, .app, .app-content, main.main, .view.active, .docs-panel.active,
  .docs-editor-view.active { display: block !important; height: auto !important; overflow: visible !important; }
  #richtext-active, #wikiRichtext { max-width: none !important; padding: 0 !important; overflow: visible !important; }
}