/* Hero / hub color sampling propagation (Phase E) */

html[data-mc-chrome-sampled="true"] {
  --mc-sample-rgb: var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b);
  --mc-sample-tint-08: rgba(var(--mc-sample-rgb), 0.08);
  --mc-sample-tint-12: rgba(var(--mc-sample-rgb), 0.12);
  --mc-sample-tint-18: rgba(var(--mc-sample-rgb), 0.18);
  --mc-sample-tint-24: rgba(var(--mc-sample-rgb), 0.24);
  --mc-sample-ring: rgba(var(--mc-sample-rgb), 0.34);
}

/* Hub chrome bar on dark overview pages */
body.mc-chrome-tone-dark .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"],
html.mc-chrome-tone-dark .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] {
  --mc-glass-bg: color-mix(
    in srgb,
    rgb(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b)) 20%,
    rgba(20, 22, 30, 0.8)
  );
  --mc-glass-bg-hover: color-mix(
    in srgb,
    rgb(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b)) 28%,
    rgba(28, 31, 40, 0.88)
  );
  --mc-glass-border: color-mix(
    in srgb,
    rgb(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b)) 16%,
    rgba(255, 255, 255, 0.24)
  );
  --mc-chrome-indicator-bg: color-mix(
    in srgb,
    rgb(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b)) 24%,
    rgba(255, 255, 255, 0.1)
  );
}

body.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"],
html.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] {
  --mc-glass-bg: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.42);
  --mc-glass-bg-hover: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.52);
  --mc-glass-border: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.34);
  --mc-chrome-indicator-bg: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.28);
}

body.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"][data-mc-chrome-sample-luma="dark"],
html.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"][data-mc-chrome-sample-luma="dark"] {
  --mc-chrome-ink: rgba(242, 241, 237, 0.96);
  --mc-chrome-divider: rgba(255, 255, 255, 0.2);
  color: var(--mc-chrome-ink);
}

body.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-light,
html.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-light {
  display: none;
}

body.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-dark,
html.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-dark {
  display: block;
}

/* Home portal cards */
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="home"] .mc-portal-card__thumb {
  border-color: var(--mc-sample-ring);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 10px 28px var(--mc-sample-tint-12);
  transition:
    transform 0.42s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    box-shadow 0.32s ease,
    border-color 0.28s ease;
}

html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="home"] .mc-portal-card:hover .mc-portal-card__thumb,
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="home"] .mc-portal-card:focus-within .mc-portal-card__thumb {
  transform: translateY(-3px);
  border-color: rgba(var(--mc-sample-rgb), 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 16px 36px var(--mc-sample-tint-18);
}

/* Home section divider chip */
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="home"] .mc-home-divider__chip {
  background: color-mix(in srgb, rgb(var(--mc-sample-rgb)) 10%, var(--mc-surface, #fff));
  border-color: var(--mc-sample-ring);
}

/* Hub pillar + straight cards pick up sampled rim */
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] .mc-gl-pillar,
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] .mc-assets-straight-card,
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] .mc-id-card.mc-assets-straight-card {
  box-shadow: inset 0 0 0 1px var(--mc-sample-tint-12);
  transition:
    transform 0.42s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    box-shadow 0.28s ease;
}

html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] .mc-gl-pillar:hover,
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] .mc-assets-straight-card:hover,
html[data-mc-chrome-sampled="true"][data-mc-chrome-sample-mode="hub"] .mc-id-card.mc-assets-straight-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--mc-sample-tint-24),
    0 12px 28px var(--mc-sample-tint-12);
}

/* Learn chat cards - glass thread */
.mc-chrome-chat__panel {
  padding: 14px;
  border-radius: 16px;
}

.mc-chrome-chat__thread {
  display: grid;
  gap: 8px;
}

.mc-chrome-chat__bubble {
  margin: 0;
  border-radius: 14px;
  transition:
    transform 0.36s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    box-shadow 0.28s ease,
    border-color 0.24s ease;
}

.mc-learn-card--chat:hover .mc-chrome-chat__bubble--user {
  transform: translateX(2px);
}

.mc-learn-card--chat:hover .mc-chrome-chat__bubble--bot {
  transform: translateX(-2px);
}

html[data-mc-chrome-sampled="true"] .mc-chrome-chat__panel {
  border-color: var(--mc-sample-ring);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 28px var(--mc-sample-tint-08);
}

html[data-mc-chrome-sampled="true"] .mc-chrome-chat__bubble--bot {
  background: color-mix(in srgb, rgb(var(--mc-sample-rgb)) 6%, var(--est-pahkla, #f2f1ed));
  border-color: var(--mc-sample-ring);
}

html[data-mc-chrome-sampled="true"] .mc-chrome-chat__bubble--user {
  background: color-mix(in srgb, rgb(var(--mc-sample-rgb)) 18%, var(--est-blue, #0030de));
  border-color: color-mix(in srgb, rgb(var(--mc-sample-rgb)) 24%, var(--mc-border-brand-accent, rgba(0, 48, 222, 0.35)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  html[data-mc-chrome-sampled="true"] .mc-portal-card__thumb,
  html[data-mc-chrome-sampled="true"] .mc-gl-pillar,
  html[data-mc-chrome-sampled="true"] .mc-assets-straight-card,
  .mc-chrome-chat__bubble {
    transition: none;
  }
}