/* loopedin Pitch Deck — Dark Premium Tech Theme
 * Typography: Outfit (headings) + DM Sans (body) + JetBrains Mono (data)
 * Palette: Charcoal black, electric emerald, warm coral, amber
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ===========================================
   CSS VARIABLES
   =========================================== */
:root {
  --background-color: #0B0E11;
  --section-divider-bg: #0B0E11;

  /* Typography */
  --heading-font: "Outfit", "DM Sans", Helvetica, sans-serif;
  --body-font: "DM Sans", "Outfit", Helvetica, sans-serif;
  --mono-font: "JetBrains Mono", "Fira Code", monospace;
  --base-font-size: 32px;
  --text-size: 16pt;
  --h1-size: 48pt;
  --h2-size: 32pt;
  --h3-size: 22pt;
  --footnote-size: 11pt;

  /* Colors */
  --primary-color: #00E5A0;
  --secondary-color: #FFB020;
  --danger-color: #FF4D4D;
  --text-color: #F0F2F5;
  --text-white: #FFFFFF;
  --muted-color: #7A8290;
  --line-color: #2A2F36;

  /* Surfaces */
  --surface-color: #13171C;
  --surface-border: #1E2329;
  --surface-hover: #1A1F26;

  /* Layout */
  --slide-padding: 70px;
  --slide-padding-top: 50px;
  --content-gap: 25px;

  /* Boxes & Borders */
  --box-radius: 12px;
  --box-bg: #13171C;
  --box-border: #1E2329;
  --accent-border-width: 4px;

  /* Callout colors */
  --blue: #4DA6FF;
  --blue-bg: rgba(77, 166, 255, 0.08);
  --blue-border: rgba(77, 166, 255, 0.2);

  --orange: #FFB020;
  --orange-bg: rgba(255, 176, 32, 0.08);
  --orange-border: rgba(255, 176, 32, 0.2);

  --green: #00E5A0;
  --green-bg: rgba(0, 229, 160, 0.08);
  --green-border: rgba(0, 229, 160, 0.2);

  --gray: #7A8290;
  --gray-bg: rgba(122, 130, 144, 0.08);
  --gray-border: rgba(122, 130, 144, 0.2);

  --red: #FF4D4D;
  --red-bg: rgba(255, 77, 77, 0.08);
  --red-border: rgba(255, 77, 77, 0.2);
}

/* ===========================================
   BASE STYLES
   =========================================== */

.reveal {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
}

.reveal-viewport {
  background-color: var(--background-color);
}

.reveal-viewport.is-section-divider .slide-background.present {
  background-color: var(--section-divider-bg) !important;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-white);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.reveal h1 { font-size: var(--h1-size); }
.reveal h2 { font-size: var(--h2-size); margin-bottom: 0; }
.reveal h3 { font-size: var(--h3-size); }

.reveal p,
.reveal li,
.reveal .callout,
.reveal blockquote {
  font-size: var(--text-size);
  color: var(--text-color);
  line-height: 1.6;
}

.reveal .callout p,
.reveal .callout li,
.reveal blockquote p {
  font-size: inherit;
}

/* Links */
.reveal a {
  color: var(--primary-color);
  text-decoration: none;
}

/* ===========================================
   SLIDE LAYOUT
   =========================================== */

.reveal .slides section {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important;
  box-sizing: border-box;
  text-align: left;
}

.reveal .slides section.stack {
  padding: 0 !important;
}

.reveal .slides section > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--content-gap);
  text-align: left;
}

.reveal .slides section > .footnote {
  position: absolute;
  bottom: 15px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  font-size: var(--footnote-size);
  color: var(--muted-color);
}

/* ===========================================
   SECTION DIVIDERS
   =========================================== */

.reveal .slides section.section-divider {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

.reveal .slides section.section-divider h1 {
  font-size: 48pt;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  max-width: 900px;
}

.reveal .slides section.section-divider p {
  font-size: 20pt;
  color: var(--muted-color);
  max-width: 700px;
}

/* ===========================================
   TEXT SIZE UTILITIES
   =========================================== */

.text-lg { font-size: 18pt !important; }
.text-xl { font-size: 20pt !important; }
.text-2xl { font-size: 24pt !important; }
.text-3xl { font-size: 28pt !important; }
.text-4xl { font-size: 32pt !important; }

.text-muted { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500; }
.font-light { font-weight: 300; }
.font-bold { font-weight: 600; }

/* ===========================================
   BOXES / CONTAINERS
   =========================================== */

.box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: var(--box-radius);
  padding: 20px;
  margin: 10px 0;
}

.box-outlined {
  border: 1px solid var(--box-border);
  border-radius: var(--box-radius);
  padding: 20px;
  margin: 10px 0;
}

/* ===========================================
   BLOCKQUOTES
   =========================================== */

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
}

/* ===========================================
   CALLOUTS
   =========================================== */

.callout {
  border-left: var(--accent-border-width) solid var(--primary-color);
  padding: 15px 20px;
  margin: 15px 0;
  background: rgba(0, 229, 160, 0.06);
  border-radius: var(--box-radius);
}

.callout-blue {
  border-left-color: var(--blue);
  background: var(--blue-bg);
}

.callout-orange {
  border-left-color: var(--orange);
  background: var(--orange-bg);
}

.callout-green {
  border-left-color: var(--green);
  background: var(--green-bg);
}

.callout-gray {
  border-left-color: var(--gray);
  background: var(--gray-bg);
}

.callout-red {
  border-left-color: var(--red);
  background: var(--red-bg);
}

/* ===========================================
   CUSTOM COMPONENTS — loopedin Pitch
   =========================================== */

/* Accent text colors */
.text-emerald { color: var(--primary-color) !important; }
.text-coral { color: var(--danger-color) !important; }
.text-amber { color: var(--secondary-color) !important; }
.text-blue { color: var(--blue) !important; }
.text-white { color: #FFFFFF !important; }

/* Stat / big number display */
.stat-number {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 56pt;
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat-label {
  font-family: var(--body-font);
  font-size: 14pt;
  color: var(--muted-color);
  margin-top: 8px;
  font-weight: 400;
}

/* Glow card — surface with accent glow */
.glow-card {
  background: var(--surface-color);
  border: 1px solid var(--surface-border);
  border-radius: var(--box-radius);
  padding: 24px;
  position: relative;
}

.glow-card--emerald {
  border-color: rgba(0, 229, 160, 0.25);
  box-shadow: 0 0 30px rgba(0, 229, 160, 0.06);
}

.glow-card--red {
  border-color: rgba(255, 77, 77, 0.25);
  box-shadow: 0 0 30px rgba(255, 77, 77, 0.06);
}

.glow-card--amber {
  border-color: rgba(255, 176, 32, 0.25);
  box-shadow: 0 0 30px rgba(255, 176, 32, 0.06);
}

.glow-card--blue {
  border-color: rgba(77, 166, 255, 0.25);
  box-shadow: 0 0 30px rgba(77, 166, 255, 0.06);
}

/* Tag / badge */
.tag {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 10pt;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tag--emerald {
  background: rgba(0, 229, 160, 0.12);
  color: var(--primary-color);
  border: 1px solid rgba(0, 229, 160, 0.25);
}

.tag--red {
  background: rgba(255, 77, 77, 0.12);
  color: var(--danger-color);
  border: 1px solid rgba(255, 77, 77, 0.25);
}

.tag--amber {
  background: rgba(255, 176, 32, 0.12);
  color: var(--secondary-color);
  border: 1px solid rgba(255, 176, 32, 0.25);
}

.tag--blue {
  background: rgba(77, 166, 255, 0.12);
  color: var(--blue);
  border: 1px solid rgba(77, 166, 255, 0.25);
}

/* Mockup container — fake app window */
.mockup-window {
  background: var(--surface-color);
  border: 1px solid var(--surface-border);
  border-radius: var(--box-radius);
  overflow: hidden;
}

.mockup-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--surface-border);
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-border);
}

.mockup-dot:nth-child(1) { background: #FF5F57; }
.mockup-dot:nth-child(2) { background: #FFBD2E; }
.mockup-dot:nth-child(3) { background: #28C840; }

.mockup-titlebar-text {
  font-family: var(--mono-font);
  font-size: 9pt;
  color: var(--muted-color);
  margin-left: 8px;
}

.mockup-body {
  padding: 20px;
}

/* Search bar mockup */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  margin-bottom: 16px;
}

.search-bar i {
  color: var(--muted-color);
  font-size: 14pt;
}

.search-bar span {
  font-family: var(--body-font);
  font-size: 14pt;
  color: var(--text-color);
}

/* Search result item */
.search-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.search-result:hover {
  border-color: var(--surface-border);
}

.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12pt;
}

.search-result-icon--voice {
  background: rgba(0, 229, 160, 0.12);
  color: var(--primary-color);
}

.search-result-icon--slack {
  background: rgba(77, 166, 255, 0.12);
  color: var(--blue);
}

.search-result-icon--jira {
  background: rgba(255, 176, 32, 0.12);
  color: var(--secondary-color);
}

.search-result-source {
  font-family: var(--mono-font);
  font-size: 9pt;
  color: var(--muted-color);
  margin-bottom: 2px;
}

.search-result-text {
  font-size: 12pt;
  color: var(--text-color);
  line-height: 1.4;
}

/* Slack message mockup */
.slack-msg {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}

.slack-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14pt;
  font-weight: 700;
  color: #fff;
}

.slack-avatar--bot {
  background: linear-gradient(135deg, #00E5A0, #00B880);
}

.slack-name {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 12pt;
  color: var(--text-white);
}

.slack-name .slack-badge {
  font-family: var(--mono-font);
  font-size: 8pt;
  background: rgba(0, 229, 160, 0.15);
  color: var(--primary-color);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 500;
  vertical-align: middle;
}

.slack-text {
  font-size: 12pt;
  color: var(--text-color);
  line-height: 1.5;
  margin-top: 2px;
}

.slack-text .mention {
  color: var(--blue);
  background: rgba(77, 166, 255, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Timeline / flow connector */
.flow-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}

.flow-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.flow-connector {
  width: 2px;
  height: 20px;
  margin-left: 5px;
  background: var(--line-color);
}

/* Comparison table */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--box-radius);
  overflow: hidden;
}

.comparison-table th {
  font-family: var(--heading-font);
  font-size: 14pt;
  font-weight: 600;
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--surface-border);
}

.comparison-table th:first-child {
  background: rgba(255, 77, 77, 0.06);
  color: var(--danger-color);
}

.comparison-table th:last-child {
  background: rgba(0, 229, 160, 0.06);
  color: var(--primary-color);
}

.comparison-table td {
  font-size: 13pt;
  padding: 12px 20px;
  color: var(--text-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table td:first-child {
  background: rgba(255, 77, 77, 0.03);
  color: rgba(240, 242, 245, 0.7);
}

.comparison-table td:last-child {
  background: rgba(0, 229, 160, 0.03);
}

/* Hub diagram styles */
.hub-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-center {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 229, 160, 0.15), rgba(0, 229, 160, 0.05));
  border: 2px solid rgba(0, 229, 160, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
  box-shadow: 0 0 60px rgba(0, 229, 160, 0.12);
}

.hub-center img {
  width: 48px;
  height: 48px;
}

.hub-center span {
  font-family: var(--heading-font);
  font-size: 11pt;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 6px;
}

.hub-spoke {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background: var(--surface-color);
  border: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.hub-spoke i {
  font-size: 18pt;
}

.hub-spoke span {
  font-family: var(--mono-font);
  font-size: 7pt;
  color: var(--muted-color);
  text-transform: uppercase;
}

.hub-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 160, 0.3), transparent);
  z-index: 1;
  transform-origin: center;
}

/* Feature list with icons */
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13pt;
}

.feature-icon--emerald {
  background: rgba(0, 229, 160, 0.12);
  color: var(--primary-color);
}

.feature-icon--blue {
  background: rgba(77, 166, 255, 0.12);
  color: var(--blue);
}

.feature-icon--amber {
  background: rgba(255, 176, 32, 0.12);
  color: var(--secondary-color);
}

.feature-title {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 14pt;
  color: var(--text-white);
  margin-bottom: 2px;
}

.feature-desc {
  font-size: 12pt;
  color: var(--muted-color);
  line-height: 1.4;
}

/* Meeting summary mockup */
.summary-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

.summary-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

.summary-text {
  font-size: 12pt;
  color: var(--text-color);
  line-height: 1.5;
}

/* Automation builder nodes mockup */
.node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-color);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  font-size: 11pt;
  color: var(--text-color);
}

.node i {
  font-size: 12pt;
}

.node-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: var(--muted-color);
  font-size: 12pt;
}

/* CTA button */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: var(--primary-color);
  color: #0B0E11;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 16pt;
  border-radius: 12px;
  text-decoration: none;
  margin-top: 20px;
  letter-spacing: -0.01em;
}

/* Loop watermark */
.loop-watermark {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 350px;
  height: 350px;
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}

/* Logo inline */
.logo-inline {
  height: 36px;
  width: auto;
}

.logo-large {
  height: 56px;
  width: auto;
}

/* Custom list style */
.reveal ul {
  list-style: none;
  padding-left: 0;
}

.reveal ul li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.reveal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

/* Loop watermark background on every slide */
.reveal .slides section::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 520px;
  height: 465px;
  background: url("data:image/svg+xml,%3Csvg width='1504' height='1345' viewBox='0 0 1504 1345' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M282.101 948.753C207.398 1057.84 194.305 1195.13 195.642 1321.57L0.105661 1323.64C-1.31396 1189.34 10.2097 999.702 120.757 838.267C225.543 685.247 406.485 574.89 697.341 542.857C741.928 269.465 963.521 -6.55232e-05 1322.74 2.07935e-05L1322.74 195.547C1095.42 195.547 943.337 353.602 898.393 533.626C1192.28 538.789 1376.23 632.247 1458.46 782.434C1548.25 946.431 1491.45 1135.97 1390.35 1237.07C1292.43 1334.99 1108.34 1387.81 947.24 1298.08C799.903 1216.02 703.632 1034.1 690.316 740.657C460.135 771.466 344.233 858.02 282.101 948.753ZM885.46 728.924C896.333 989.725 979.241 1092.07 1042.39 1127.24C1116.29 1168.4 1206.69 1144.18 1252.08 1098.79C1302.96 1047.91 1327.87 951.106 1286.94 876.344C1252.61 813.652 1150.6 731.132 885.46 728.924Z' fill='%23F0F2F5'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content is above noise */
.reveal .slides section > * {
  position: relative;
  z-index: 1;
}

/* Slide accent line at top */
.reveal .slides section:not(.section-divider)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), transparent);
  z-index: 1;
}

/* Section divider specific */
.reveal .slides section.section-divider::before {
  display: none;
}

/* Mono text utility */
.mono {
  font-family: var(--mono-font);
}

/* Subtle gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color), #4DA6FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Report card mockup */
.report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.report-row:last-child {
  border-bottom: none;
}

.report-label {
  font-size: 12pt;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-value {
  font-family: var(--mono-font);
  font-size: 12pt;
  font-weight: 600;
}

/* Progress bar */
.progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  width: 80px;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
}

/* Icon scatter for disconnected tools slide */
.tool-icon-scattered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--surface-color);
  border: 1px solid var(--surface-border);
  font-size: 22pt;
}

/* Reveal.js progress bar color */
.reveal .progress span {
  background: var(--primary-color);
}

/* Controls color */
.reveal .controls {
  color: var(--primary-color);
}

/* Reverse zoom direction for solution slide:
   Enter = start big, zoom out to normal (brief large scale is barely visible)
   Exit  = shrink to small (no pixelation since scale stays <= 1) */
.reveal .slides section#solution.future {
  transform: scale(3) !important;
}

.reveal .slides section#solution.past {
  transform: scale(0.2) !important;
}

/* ===========================================
   ANIMATIONS
   =========================================== */

/* Endlessly spinning rotate icon on hook slide */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loop-pulse {
  display: inline-block;
  animation: spin 2.5s linear infinite;
}

/* Breathing glow on solution logo */
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 229, 160, 0.15)); }
  50% { filter: drop-shadow(0 0 24px rgba(0, 229, 160, 0.4)); }
}

.logo-glow {
  animation: logo-glow 3s ease-in-out infinite;
}

/* CTA button pulse */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(0, 229, 160, 0.2); }
}

.cta-button {
  animation: cta-pulse 2.5s ease-in-out infinite;
}

/* AI chat answer styles */
.ai-answer {
  font-size: 13pt;
  color: var(--text-color);
  line-height: 1.7;
  padding: 4px 0;
}

.ai-answer p {
  font-size: 13pt;
  margin: 0 0 10px 0;
}

.citation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono-font);
  font-size: 8pt;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  cursor: default;
  text-decoration: none;
  margin: 0 1px;
}

.citation--voice {
  background: rgba(0, 229, 160, 0.12);
  color: var(--primary-color);
  border: 1px solid rgba(0, 229, 160, 0.2);
}

.citation--slack {
  background: rgba(77, 166, 255, 0.12);
  color: var(--blue);
  border: 1px solid rgba(77, 166, 255, 0.2);
}

.citation--jira {
  background: rgba(255, 176, 32, 0.12);
  color: var(--secondary-color);
  border: 1px solid rgba(255, 176, 32, 0.2);
}

.ai-sources {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
  margin-top: 12px;
}

.ai-source-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  font-size: 9pt;
  color: var(--muted-color);
}

.ai-source-chip i {
  font-size: 10pt;
}

/* Workspace search animated mockup */
.search-mockup-video,
.voice-mockup-video {
  display: block;
  border-radius: 12px;
}