buzz/desktop/src/shared/styles/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@config "../../../tailwind.config.js";

.buzz-sidebar-scrollbar {
  scrollbar-color: transparent transparent;
}

.buzz-sidebar-scrollbar:hover {
  scrollbar-color: hsl(var(--sidebar-border) / 0.8) transparent;
}

.buzz-sidebar-scrollbar::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.buzz-sidebar-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.buzz-sidebar-scrollbar::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: transparent;
  border: 3px solid transparent;
  border-radius: 999px;
}

.buzz-sidebar-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: hsl(var(--sidebar-border) / 0.8);
}

.sprout-arc-spinner {
  animation: sprout-arc-spinner-spin 500ms linear infinite;
}

@keyframes sprout-arc-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

.buzz-wave-hand {
  display: inline-block;
  transform-origin: 70% 70%;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .buzz-wave-hover-trigger:hover .buzz-wave-hand {
    animation: buzz-wave-hand 1200ms ease-in-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buzz-wave-hover-trigger:hover .buzz-wave-hand {
    animation: none;
  }
}

@keyframes buzz-wave-hand {
  0%,
  100% {
    transform: rotate(0deg);
  }

  12%,
  38%,
  64% {
    transform: rotate(15deg);
  }

  25%,
  51%,
  77% {
    transform: rotate(-15deg);
  }
}

.buzz-emoji-mart {
  align-items: stretch;
  display: flex;
  justify-content: stretch;
  overflow: hidden;
  width: 100%;
}

.buzz-emoji-mart > div {
  align-items: stretch;
  display: flex;
  height: 100%;
  justify-content: stretch;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.buzz-emoji-mart em-emoji-picker {
  --border-radius: 12px;
  --category-icon-size: 24px;
  --color-border: transparent;
  --color-border-over: rgb(255 255 255 / 0.1);
  --font-family: inherit;
  --font-size: 14px;
  --rgb-accent: var(--buzz-emoji-picker-rgb-color, 245, 247, 255);
  --rgb-background: var(--buzz-emoji-picker-rgb-background, 54, 58, 79);
  --rgb-color: var(--buzz-emoji-picker-rgb-color, 245, 247, 255);
  --rgb-input: var(--buzz-emoji-picker-rgb-input, 47, 51, 68);
  --shadow: none;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

@keyframes buzz-avatar-squish {
  0% {
    transform: translate(
        var(--buzz-avatar-emoji-offset-x, 0px),
        var(--buzz-avatar-emoji-offset-y, 0px)
      )
      scale(1);
  }

  42% {
    transform: translate(
        var(--buzz-avatar-emoji-offset-x, 0px),
        var(--buzz-avatar-emoji-offset-y, 0px)
      )
      scaleX(0.96) scaleY(0.88);
  }

  100% {
    transform: translate(
        var(--buzz-avatar-emoji-offset-x, 0px),
        var(--buzz-avatar-emoji-offset-y, 0px)
      )
      scale(1);
  }
}

.buzz-avatar-emoji-glyph {
  --buzz-avatar-emoji-offset-x: 1px;
  --buzz-avatar-emoji-offset-y: 7px;
  transform: translate(
    var(--buzz-avatar-emoji-offset-x),
    var(--buzz-avatar-emoji-offset-y)
  );
}

.buzz-avatar-squish {
  animation: buzz-avatar-squish 200ms ease-out;
  transform-origin: center;
}

.buzz-shimmer {
  --buzz-shimmer-duration: 2000ms;
  --buzz-shimmer-band: 400%;
  --buzz-shimmer-highlight: color-mix(
    in srgb,
    hsl(var(--foreground)) 82%,
    hsl(var(--muted-foreground)) 18%
  );

  color: hsl(var(--muted-foreground));
  display: inline-block;
  position: relative;
}

.buzz-shimmer::before {
  animation: buzz-shimmer var(--buzz-shimmer-duration) linear infinite;
  background-clip: text;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    var(--buzz-shimmer-highlight) 50%,
    transparent 60%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: var(--buzz-shimmer-band) 100%;
  color: transparent;
  content: attr(data-shimmer-text);
  inset: 0;
  pointer-events: none;
  position: absolute;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes buzz-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buzz-shimmer::before {
    animation: none;
  }
}

.buzz-poof-layer {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 2147483647;
}

.buzz-poof-burst {
  contain: layout paint style;
  height: var(--buzz-poof-size);
  left: 0;
  position: absolute;
  top: 0;
  transform: translate3d(
    calc(var(--buzz-poof-x) - 50%),
    calc(var(--buzz-poof-y) - 50%),
    0
  );
  width: var(--buzz-poof-size);
}

.buzz-poof-frame {
  animation: buzz-poof-frame 400ms linear both;
  height: 100%;
  inset: 0;
  object-fit: contain;
  opacity: 0;
  position: absolute;
  transform: translate3d(0, 0, 0) scale(0.92);
  transform-origin: center;
  width: 100%;
}

.buzz-poof-frame-1 {
  animation-name: buzz-poof-frame-1;
}

.buzz-poof-frame-2 {
  animation-name: buzz-poof-frame-2;
}

.buzz-poof-frame-3 {
  animation-name: buzz-poof-frame-3;
}

.buzz-poof-frame-4 {
  animation-name: buzz-poof-frame-4;
}

.buzz-poof-frame-5 {
  animation-name: buzz-poof-frame-5;
}

@keyframes buzz-poof-frame-1 {
  0%,
  19.99% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.94);
  }

  20%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes buzz-poof-frame-2 {
  0%,
  19.99% {
    opacity: 0;
  }

  20%,
  39.99% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  40%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.01);
  }
}

@keyframes buzz-poof-frame-3 {
  0%,
  39.99% {
    opacity: 0;
  }

  40%,
  59.99% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.01);
  }

  60%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
}

@keyframes buzz-poof-frame-4 {
  0%,
  59.99% {
    opacity: 0;
  }

  60%,
  79.99% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.02);
  }

  80%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.03);
  }
}

@keyframes buzz-poof-frame-5 {
  0%,
  79.99% {
    opacity: 0;
  }

  80%,
  99.99% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.03);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buzz-poof-frame {
    animation: buzz-poof-frame-reduced 180ms ease-out both;
  }

  .buzz-poof-frame:not(.buzz-poof-frame-3) {
    display: none;
  }
}

@keyframes buzz-poof-frame-reduced {
  0% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}

@property --buzz-grainient-x-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 85%;
}

@property --buzz-grainient-y-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

@property --buzz-grainient-x-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 60%;
}

@property --buzz-grainient-y-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 24%;
}

@property --buzz-grainient-x-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 13%;
}

@property --buzz-grainient-y-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 82%;
}

@property --buzz-grainient-x-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 24%;
}

@property --buzz-grainient-y-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 7%;
}

.buzz-setup-loading-shell {
  --buzz-grainient-alpha-strong: 0.46;
  --buzz-grainient-alpha-medium: 0.34;
  --buzz-grainient-alpha-soft: 0.24;
  --buzz-setup-loading-text-color: color-mix(
    in srgb,
    hsl(var(--foreground)) 88%,
    hsl(var(--background)) 12%
  );
  --buzz-grainient-color-0: hsl(
    var(--chart-5) /
    var(--buzz-grainient-alpha-strong)
  );
  --buzz-grainient-color-1: hsl(
    var(--chart-3) /
    var(--buzz-grainient-alpha-strong)
  );
  --buzz-grainient-color-2: hsl(
    var(--primary) /
    var(--buzz-grainient-alpha-medium)
  );
  --buzz-grainient-color-3: hsl(
    var(--chart-2) /
    var(--buzz-grainient-alpha-strong)
  );
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  isolation: isolate;
  position: relative;
}

.dark .buzz-setup-loading-shell {
  --buzz-grainient-alpha-strong: 0.68;
  --buzz-grainient-alpha-medium: 0.5;
  --buzz-grainient-alpha-soft: 0.34;
  --buzz-setup-loading-text-color: color-mix(
    in srgb,
    hsl(var(--foreground)) 94%,
    hsl(var(--background)) 6%
  );
}

.buzz-setup-grainient {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.buzz-setup-grainient__wash,
.buzz-setup-grainient__veil {
  inset: 0;
  position: absolute;
}

.buzz-setup-grainient__wash {
  --buzz-grainient-s-start-0: 9%;
  --buzz-grainient-s-end-0: 55%;
  --buzz-grainient-s-start-1: 5%;
  --buzz-grainient-s-end-1: 72%;
  --buzz-grainient-s-start-2: 5%;
  --buzz-grainient-s-end-2: 52%;
  --buzz-grainient-s-start-3: 13%;
  --buzz-grainient-s-end-3: 68%;
  --buzz-grainient-x-0: 85%;
  --buzz-grainient-y-0: 80%;
  --buzz-grainient-x-1: 60%;
  --buzz-grainient-y-1: 24%;
  --buzz-grainient-x-2: 13%;
  --buzz-grainient-y-2: 82%;
  --buzz-grainient-x-3: 24%;
  --buzz-grainient-y-3: 7%;
  animation: buzz-grainient-orbit 10s linear infinite alternate;
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(
      circle at var(--buzz-grainient-x-0) var(--buzz-grainient-y-0),
      var(--buzz-grainient-color-0) var(--buzz-grainient-s-start-0),
      transparent var(--buzz-grainient-s-end-0)
    ),
    radial-gradient(
      circle at var(--buzz-grainient-x-1) var(--buzz-grainient-y-1),
      var(--buzz-grainient-color-1) var(--buzz-grainient-s-start-1),
      transparent var(--buzz-grainient-s-end-1)
    ),
    radial-gradient(
      circle at var(--buzz-grainient-x-2) var(--buzz-grainient-y-2),
      var(--buzz-grainient-color-2) var(--buzz-grainient-s-start-2),
      transparent var(--buzz-grainient-s-end-2)
    ),
    radial-gradient(
      circle at var(--buzz-grainient-x-3) var(--buzz-grainient-y-3),
      var(--buzz-grainient-color-3) var(--buzz-grainient-s-start-3),
      transparent var(--buzz-grainient-s-end-3)
    );
  background-blend-mode: normal, normal, normal, normal;
  contain: paint;
  filter: saturate(1.08);
  transform: translateZ(0);
  will-change: transform, opacity;
}

.buzz-setup-grainient__veil {
  background:
    radial-gradient(
      ellipse 74% 54% at 50% 52%,
      transparent 0%,
      hsl(var(--background) / 0.04) 72%,
      hsl(var(--background) / 0.16) 100%
    ),
    linear-gradient(
      180deg,
      hsl(var(--background) / 0.04),
      hsl(var(--background) / 0.12)
    );
}

.buzz-setup-loading-text {
  animation: buzz-setup-character-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  backface-visibility: hidden;
  color: var(--buzz-setup-loading-text-color);
  display: inline-block;
  opacity: 0;
  text-shadow:
    0 1px 2px hsl(var(--background) / 0.62),
    0 14px 34px hsl(var(--background) / 0.5);
  transform: translate3d(0, 32px, 0);
  transform-origin: 50% 55%;
  will-change: transform, opacity;
}

@keyframes buzz-grainient-orbit {
  0% {
    --buzz-grainient-x-0: 85%;
    --buzz-grainient-y-0: 80%;
    --buzz-grainient-x-1: 60%;
    --buzz-grainient-y-1: 24%;
    --buzz-grainient-x-2: 13%;
    --buzz-grainient-y-2: 82%;
    --buzz-grainient-x-3: 24%;
    --buzz-grainient-y-3: 7%;
  }

  100% {
    --buzz-grainient-x-0: 31%;
    --buzz-grainient-y-0: 94%;
    --buzz-grainient-x-1: 2%;
    --buzz-grainient-y-1: 25%;
    --buzz-grainient-x-2: 98%;
    --buzz-grainient-y-2: 20%;
    --buzz-grainient-x-3: 95%;
    --buzz-grainient-y-3: 92%;
  }
}

@keyframes buzz-setup-character-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buzz-setup-grainient__wash {
    animation: none;
  }

  .buzz-setup-loading-text {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.buzz-avatar-hue-scrubber {
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffff00 16.67%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.67%,
    #ff00ff 83.33%,
    #ff0000 100%
  );
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.buzz-animated-count {
  display: inline-block;
  font-kerning: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.buzz-animated-count__motion {
  display: inline-flex;
  line-height: 1;
}

.buzz-animated-count__static {
  display: none;
}

.buzz-sidebar-action-card--success {
  background-color: color-mix(
    in srgb,
    var(--status-added) 12%,
    hsl(var(--background)) 88%
  );
  border-color: color-mix(
    in srgb,
    var(--status-added) 34%,
    hsl(var(--border)) 66%
  );
  color: hsl(var(--foreground));
}

.buzz-sidebar-action-card--success:hover {
  background-color: color-mix(
    in srgb,
    var(--status-added) 16%,
    hsl(var(--background)) 84%
  );
}

.dark .buzz-sidebar-action-card--success {
  background-color: color-mix(
    in srgb,
    var(--status-added) 15%,
    hsl(var(--background)) 85%
  );
  border-color: color-mix(
    in srgb,
    var(--status-added) 42%,
    hsl(var(--border)) 58%
  );
}

.dark .buzz-sidebar-action-card--success:hover {
  background-color: color-mix(
    in srgb,
    var(--status-added) 19%,
    hsl(var(--background)) 81%
  );
}

.buzz-sidebar-action-card__success-icon {
  color: var(--status-added);
}

.buzz-sidebar-action-description {
  --buzz-sidebar-action-description-line-height: 1.375em;
  display: inline-block;
  line-height: var(--buzz-sidebar-action-description-line-height);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.buzz-sidebar-action-description__motion {
  display: block;
  height: var(--buzz-sidebar-action-description-line-height);
  overflow: hidden;
}

.buzz-sidebar-action-description__reel {
  animation: buzz-sidebar-action-description-roll-up 260ms
    cubic-bezier(0.2, 0.8, 0.2, 1) both;
  display: flex;
  flex-direction: column;
  line-height: var(--buzz-sidebar-action-description-line-height);
  will-change: transform;
}

.buzz-sidebar-action-description__reel > span {
  display: block;
  height: var(--buzz-sidebar-action-description-line-height);
  line-height: var(--buzz-sidebar-action-description-line-height);
}

@keyframes buzz-sidebar-action-description-roll-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(
      calc(-1 * var(--buzz-sidebar-action-description-line-height))
    );
  }
}

.buzz-animated-count__slot {
  display: inline-block;
  height: 1em;
  line-height: 1;
}

.buzz-animated-count__slot--digit {
  overflow: hidden;
  text-align: center;
  width: 1ch;
}

.buzz-animated-count__reel {
  display: flex;
  flex-direction: column;
  height: 2em;
  line-height: 1;
  will-change: transform;
}

.buzz-animated-count__reel > span {
  display: block;
  height: 1em;
  line-height: 1;
}

.buzz-animated-count__slot[data-direction="up"] .buzz-animated-count__reel {
  animation: buzz-animated-count-roll-up 260ms cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}

.buzz-animated-count__slot[data-direction="down"] .buzz-animated-count__reel {
  animation: buzz-animated-count-roll-down 260ms cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}

.buzz-animated-count__symbol {
  display: inline-block;
  line-height: 1;
}

.buzz-animated-count__symbol[data-direction="up"] {
  animation: buzz-animated-count-symbol-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}

.buzz-animated-count__symbol[data-direction="down"] {
  animation: buzz-animated-count-symbol-down 220ms
    cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes buzz-animated-count-roll-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-1em);
  }
}

@keyframes buzz-animated-count-roll-down {
  from {
    transform: translateY(-1em);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes buzz-animated-count-symbol-up {
  from {
    opacity: 0;
    transform: translateY(0.25em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buzz-animated-count-symbol-down {
  from {
    opacity: 0;
    transform: translateY(-0.25em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buzz-animated-count__motion {
    display: none;
  }

  .buzz-animated-count__static {
    display: inline;
  }
}

/* ── Tiptap rich-text composer ──────────────────────────────────────── */
.rich-text-composer .tiptap {
  outline: none;
  min-height: 1lh;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.rich-text-composer .tiptap p {
  margin: 0;
}

.rich-text-composer .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(var(--muted-foreground) / 0.65);
  pointer-events: none;
  height: 0;
}

.pulse-composer
  .rich-text-composer
  .tiptap
  p.is-editor-empty:first-child::before {
  color: hsl(var(--muted-foreground) / 0.65);
}

.pulse-composer:focus-within
  .rich-text-composer
  .tiptap
  p.is-editor-empty:first-child::before {
  color: hsl(var(--foreground));
}

.rich-text-composer .tiptap strong {
  font-weight: 600;
}

.rich-text-composer .tiptap em {
  font-style: italic;
}

.rich-text-composer .tiptap s {
  text-decoration: line-through;
}

.rich-text-composer .tiptap pre {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--muted) / 0.6);
  padding: 0.375rem 0.75rem;
  overflow-x: auto;
  margin: 0.25rem 0;
}

.rich-text-composer .tiptap blockquote {
  border-left: 2px solid hsl(var(--border));
  padding-left: 1rem;
  font-style: italic;
  color: hsl(var(--muted-foreground));
  margin: 0.25rem 0;
}

.rich-text-composer .tiptap ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.25rem 0;
}

.rich-text-composer .tiptap ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0.25rem 0;
}

.rich-text-composer .tiptap li {
  margin: 0.125rem 0;
}

.rich-text-composer .tiptap li p {
  display: inline;
}

.rich-text-composer .tiptap a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: text;
}

.rich-text-composer .tiptap hr {
  border-color: hsl(var(--border) / 0.8);
  margin: 0.5rem 0;
}

/* Inline chips — timeline markdown + composer share `.message-markdown` scope.
   Body copy is text-sm; inline code labels sit one step down (text-xs).
   All chip variants share one box height so mono labels stay balanced. */
.message-markdown {
  --inline-chip-padding-block-start: 0.1875rem;
  --inline-chip-padding-block-end: 0.125rem;
  --inline-chip-padding-inline: 0.25rem;
  --inline-chip-min-height: calc(
    var(--text-sm) +
    var(--inline-chip-padding-block-start) +
    var(--inline-chip-padding-block-end)
  );
  --inline-code-font-size: var(--text-xs);
  --agent-icon-size: 0.95em;
  --agent-icon-gap: 0.125rem;
}

.message-markdown .mention-chip,
.message-markdown .inline-code-chip,
.message-markdown :not(pre) > code {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: var(--inline-chip-min-height);
  padding: var(--inline-chip-padding-block-start)
    var(--inline-chip-padding-inline) var(--inline-chip-padding-block-end);
  border-radius: calc(var(--radius) - 4px);
  font-weight: 500;
  line-height: 1;
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.message-markdown .mention-chip {
  font-size: inherit;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

.message-markdown .mention-chip.inbox-channel-chip {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground) / 0.82);
}

.message-markdown .mention-chip.search-channel-chip {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground) / 0.82);
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out;
}

.search-result-row[aria-selected="true"]
  .message-markdown
  .mention-chip.search-channel-chip {
  background: hsl(var(--muted) / 0.82);
  color: hsl(var(--muted-foreground) / 0.95);
}

.message-markdown.inbox-preview-markdown {
  --inline-chip-padding-block-start: 0.125rem;
  --inline-chip-padding-block-end: 0.0625rem;
  overflow: hidden;
  padding-bottom: 0.25rem;
}

.message-markdown.inbox-preview-markdown > :first-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.message-markdown.inbox-preview-markdown > :not(:first-child) {
  display: none;
}

.message-markdown.inbox-preview-markdown br {
  display: none;
}

.message-markdown.inbox-preview-markdown .mention-chip,
.message-markdown.inbox-preview-markdown .inline-code-chip,
.message-markdown.inbox-preview-markdown :not(pre) > code {
  display: inline;
  overflow: visible;
  overflow-wrap: normal;
  text-overflow: clip;
  vertical-align: baseline;
  white-space: nowrap;
  word-break: normal;
}

.message-markdown .mention-chip-prefix {
  display: inline-block;
  line-height: 1;
  transform: translateY(-0.12em);
}

.message-markdown .inline-code-chip,
.message-markdown :not(pre) > code {
  font-size: var(--inline-code-font-size);
  font-family: ui-monospace, monospace;
  background: hsl(var(--muted));
  color: inherit;
}

/* Code block content — higher specificity than the inline chips above; kept
   after them so descending-specificity ordering stays clean. */
.rich-text-composer .tiptap pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
}

.mention-chip-hover {
  transition-property:
    color, background-color, border-color, outline-color, text-decoration-color,
    fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.mention-chip-hover:hover {
  background: hsl(var(--primary) / 0.25);
  color: hsl(var(--primary) / 0.9);
}

.message-markdown .agent-mention-at-hidden {
  display: inline-block;
  width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: baseline;
  line-height: 1;
}

.message-markdown .agent-mention-highlight {
  position: relative;
  padding-left: calc(
    var(--inline-chip-padding-inline) +
    var(--agent-icon-size) +
    var(--agent-icon-gap)
  );
}

.message-markdown .agent-mention-highlight::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--inline-chip-padding-inline);
  width: var(--agent-icon-size);
  height: var(--agent-icon-size);
  background: currentColor;
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

@keyframes route-target-highlight-fade {
  0%,
  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ── Code block line numbers & diff ────────────────────────────────── */
.code-block-lines {
  counter-reset: code-line;
}

.code-block-lines [data-line] {
  display: block;
  counter-increment: code-line;
}

.code-block-lines [data-line]::before {
  content: counter(code-line);
  display: inline-block;
  width: 2.5ch;
  margin-right: 1.5ch;
  text-align: right;
  color: hsl(var(--muted-foreground) / 0.4);
  user-select: none;
  pointer-events: none;
}

.code-line-diff-add {
  background-color: hsl(120 40% 50% / 0.15);
}

.code-line-diff-remove {
  background-color: hsl(0 60% 50% / 0.15);
}

.dark .code-line-diff-add {
  background-color: hsl(120 40% 50% / 0.12);
}

.dark .code-line-diff-remove {
  background-color: hsl(0 60% 50% / 0.12);
}

@layer base {
  :root {
    /* Catppuccin Latte (mauve accent) */
    --radius: 0.625rem;
    --background: 220 23.08% 94.9%;
    --foreground: 234 16.02% 35.49%;
    --card: 220 23.08% 94.9%;
    --card-foreground: 234 16.02% 35.49%;
    --popover: 220 23.08% 94.9%;
    --popover-foreground: 234 16.02% 35.49%;
    --primary: 266 85.05% 58.04%;
    --primary-foreground: 220 23.08% 94.9%;
    --secondary: 223 15.91% 82.75%;
    --secondary-foreground: 234 16.02% 35.49%;
    --muted: 223 15.91% 82.75%;
    --muted-foreground: 233 12.8% 41.37%;
    --huddle-drawer-surface: 0 0% 0%;
    --huddle-control-surface: 0 0% 20%;
    --huddle-control-hover-surface: 0 0% 24%;
    --huddle-control-chevron-surface: 0 0% 16%;
    --huddle-control-chevron-hover-surface: 0 0% 22%;
    --huddle-control-foreground: 0 0% 98%;
    --huddle-popover-surface: 0 0% 16%;
    --huddle-popover-border: 0 0% 24%;
    --huddle-tooltip-surface: 0 0% 20%;
    --huddle-tooltip-foreground: 0 0% 98%;
    --accent: 223 15.91% 82.75%;
    --accent-foreground: 234 16.02% 35.49%;
    --destructive: 347 86.67% 44.12%;
    --destructive-foreground: 220 23.08% 94.9%;
    --border: 225 13.56% 76.86%;
    --input: 225 13.56% 76.86%;
    --ring: 234 16.02% 35.49%;
    --chart-1: 345 57.65% 74.12%;
    --chart-2: 185 37.25% 70.59%;
    --chart-3: 219 81.96% 78.43%;
    --chart-4: 35 61.18% 76.86%;
    --chart-5: 113 32.94% 73.33%;
    --sidebar: 218 25.1% 93.73%;
    --sidebar-background: 218 25.1% 93.73%;
    --sidebar-foreground: 234 16.02% 35.49%;
    --sidebar-primary: 266 85.05% 58.04%;
    --sidebar-primary-foreground: 220 23.08% 94.9%;
    --sidebar-active: var(--sidebar-primary);
    --sidebar-active-foreground: var(--sidebar-primary-foreground);
    --sidebar-accent: 220 23.08% 94.9%;
    --sidebar-accent-foreground: 234 16.02% 35.49%;
    --sidebar-border: 225 13.56% 76.86%;
    --sidebar-ring: 225 13.56% 76.86%;
  }

  .dark {
    /* Catppuccin Macchiato (mauve accent) */
    --radius: 0.625rem;
    --background: 232 23.4% 18.43%;
    --foreground: 227 68.25% 87.65%;
    --card: 232 23.4% 18.43%;
    --card-foreground: 227 68.25% 87.65%;
    --popover: 232 23.4% 18.43%;
    --popover-foreground: 227 68.25% 87.65%;
    --primary: 267 82.69% 79.61%;
    --primary-foreground: 232 23.4% 18.43%;
    --secondary: 230 18.8% 26.08%;
    --secondary-foreground: 227 68.25% 87.65%;
    --muted: 230 18.8% 26.08%;
    --muted-foreground: 228 39.22% 80%;
    --huddle-drawer-surface: 230 18.8% 26.08%;
    --huddle-control-surface: 231 15.61% 33.92%;
    --huddle-control-hover-surface: 231 15.61% 38%;
    --huddle-control-chevron-surface: 231 13.16% 29.8%;
    --huddle-control-chevron-hover-surface: 231 15.61% 33.92%;
    --huddle-control-foreground: 227 68.25% 87.65%;
    --huddle-popover-surface: 231 13.16% 29.8%;
    --huddle-popover-border: 231 15.61% 38%;
    --huddle-tooltip-surface: 231 15.61% 33.92%;
    --huddle-tooltip-foreground: 227 68.25% 87.65%;
    --accent: 230 18.8% 26.08%;
    --accent-foreground: 227 68.25% 87.65%;
    --destructive: 351 73.91% 72.94%;
    --destructive-foreground: 232 23.4% 18.43%;
    --border: 231 15.61% 33.92%;
    --input: 231 15.61% 33.92%;
    --ring: 227 68.25% 87.65%;
    --chart-1: 333 20.78% 38.04%;
    --chart-2: 193 19.61% 38.04%;
    --chart-3: 224 26.67% 41.18%;
    --chart-4: 30 8.24% 42.35%;
    --chart-5: 139 10.98% 38.82%;
    --sidebar: 234 22.75% 17.25%;
    --sidebar-background: 234 22.75% 17.25%;
    --sidebar-foreground: 227 68.25% 87.65%;
    --sidebar-primary: 267 82.69% 79.61%;
    --sidebar-primary-foreground: 232 23.4% 18.43%;
    --sidebar-active: var(--sidebar-primary);
    --sidebar-active-foreground: var(--sidebar-primary-foreground);
    --sidebar-accent: 232 23.4% 18.43%;
    --sidebar-accent-foreground: 227 68.25% 87.65%;
    --sidebar-border: 231 15.61% 33.92%;
    --sidebar-ring: 231 15.61% 33.92%;
  }

  * {
    @apply border-border;
  }

  html,
  body,
  #root {
    height: 100%;
    min-height: 100%;
    width: 100%;
  }

  mark {
    background-color: transparent;
    color: inherit;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: "Inter Variable", Inter, "Avenir Next", "Segoe UI", sans-serif;
  }

  /*
   * Tailwind v4's preflight no longer sets `cursor: pointer` on buttons.
   * Restore it for clearly actionable elements so hover affordance is
   * consistent across the app. Disabled / aria-disabled elements keep
   * the default cursor; explicit `cursor-*` utility classes still win
   * because utilities are in a later layer than base.
   */
  button:not(:disabled),
  a[href],
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="menuitemcheckbox"]:not([aria-disabled="true"]),
  [role="menuitemradio"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"]),
  [role="link"] {
    cursor: pointer;
  }

  button:disabled,
  [aria-disabled="true"] {
    cursor: default;
  }
}

:root {
  --skel-pulse-dur: 1000ms;
  --skel-pulse-count: infinite;
  --skel-pulse-min: 0.5;
  --skel-reveal-dur: 400ms;
  --skel-reveal-blur: 2px;
  --skel-reveal-ease: ease-in-out;
}

.t-skel {
  position: relative;
}

.t-skel[data-layout="flow"] {
  display: grid;
}

.t-skel-skeleton,
.t-skel-content {
  inset: 0;
  position: absolute;
}

.t-skel[data-layout="flow"] > .t-skel-skeleton,
.t-skel[data-layout="flow"] > .t-skel-content {
  grid-area: 1 / 1;
  width: 100%;
}

.t-skel[data-layout="flow"] > .t-skel-skeleton {
  inset: auto;
  position: relative;
}

.t-skel[data-layout="flow"] > .t-skel-content,
.t-skel[data-layout="flow"].is-revealed > .t-skel-skeleton {
  inset: 0;
  position: absolute;
}

.t-skel[data-layout="flow"].is-revealed > .t-skel-content {
  inset: auto;
  position: relative;
}

.t-skel-skeleton {
  filter: blur(0);
  opacity: 1;
  transition:
    opacity var(--skel-reveal-dur) var(--skel-reveal-ease),
    filter var(--skel-reveal-dur) var(--skel-reveal-ease);
  z-index: 1;
}

.t-skel-content {
  filter: blur(var(--skel-reveal-blur));
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--skel-reveal-dur) var(--skel-reveal-ease),
    filter var(--skel-reveal-dur) var(--skel-reveal-ease);
  z-index: 2;
}

.t-skel.is-revealed .t-skel-skeleton {
  filter: blur(var(--skel-reveal-blur));
  opacity: 0;
  pointer-events: none;
}

.t-skel.is-revealed .t-skel-content {
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
}

.t-skel.is-resetting .t-skel-skeleton,
.t-skel.is-resetting .t-skel-content {
  transition: none;
}

.t-skel-bar.is-pulsing,
.t-skel-skeleton.is-pulsing > :not(:has(.t-skel-bar)) {
  animation: t-skel-pulse var(--skel-pulse-dur) ease-in-out
    var(--skel-pulse-count);
}

.t-skel.is-revealed .t-skel-bar.is-pulsing,
.t-skel.is-revealed .t-skel-skeleton.is-pulsing > :not(:has(.t-skel-bar)) {
  animation: none;
}

@keyframes t-skel-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: var(--skel-pulse-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-skel-skeleton,
  .t-skel-content {
    transition: none;
  }

  .t-skel-bar.is-pulsing,
  .t-skel-skeleton.is-pulsing > :not(:has(.t-skel-bar)) {
    animation: none;
  }
}

.buzz-spoiler {
  --buzz-spoiler-accent: #333;

  -webkit-box-decoration-break: clone;
  background: transparent;
  border-radius: 0.3rem;
  box-decoration-break: clone;
  cursor: pointer;
  display: inline-block;
  line-height: inherit;
  padding: 0 0.12em;
  position: relative;
  transition:
    background-color 500ms ease-out,
    color 500ms ease-out;
  vertical-align: baseline;
}

.dark .buzz-spoiler {
  --buzz-spoiler-accent: #fff;
}

.buzz-spoiler__content {
  position: relative;
  transition:
    opacity 500ms ease-out,
    filter 500ms ease-out;
  z-index: 0;
}

.buzz-spoiler:not([data-revealed="true"]) .buzz-spoiler__content,
.buzz-spoiler:not([data-revealed="true"]) .buzz-spoiler__content * {
  color: transparent;
  filter: blur(0.5px);
  opacity: 0;
  text-decoration-color: transparent;
  text-shadow: none;
  transition:
    opacity 200ms ease-out,
    filter 200ms ease-out;
}

.buzz-spoiler__particles {
  background: transparent;
  border-radius: inherit;
  color: var(--buzz-spoiler-accent, #333);
  height: calc(100% + 0.2em);
  inset: -0.1em -0.1em;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transition: opacity 500ms ease-out;
  width: calc(100% + 0.2em);
  z-index: 1;
}

.dark .buzz-spoiler__particles {
  --buzz-spoiler-accent: #fff;
}

.buzz-spoiler--block {
  display: inline-block;
  max-width: 100%;
}

.buzz-spoiler--block .buzz-spoiler__content,
.buzz-spoiler--block [data-block-media] {
  display: inline-block;
  max-width: 100%;
}

.buzz-spoiler--block img[data-spoiler-media-size] {
  aspect-ratio: var(--buzz-spoiler-media-aspect-ratio);
  height: auto;
  width: var(--buzz-spoiler-media-width);
}

.buzz-spoiler--inert,
.buzz-spoiler--inert * {
  cursor: inherit;
  pointer-events: none;
}

.buzz-spoiler[data-revealed="true"],
.buzz-spoiler:hover,
.buzz-spoiler:focus-visible {
  animation: none;
  background: hsl(var(--muted) / 0.5);
  color: inherit;
  text-decoration-color: currentColor;
}

.buzz-spoiler[data-revealed="true"] .buzz-spoiler__particles {
  opacity: 0;
}

.ProseMirror .buzz-spoiler {
  background: transparent;
  color: transparent;
  cursor: text;
  text-decoration-color: transparent;
}

.buzz-spoiler-composer-particles {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.buzz-spoiler__particles--composer {
  border-radius: 0.3rem;
  height: auto;
  inset: auto;
  position: absolute;
  transition: none;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .buzz-spoiler__particles {
    transition: none;
  }
}

@keyframes buzz-side-panel-enter {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@layer components {
  .buzz-side-panel-enter {
    animation: buzz-side-panel-enter 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
    transform-origin: right center;
    will-change: transform, opacity;
  }

  .buzz-huddle-shell {
    --buzz-huddle-drawer-height: 5rem;
    --buzz-huddle-drawer-radius: 24px;
    --buzz-huddle-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --buzz-huddle-drawer-surface: var(--huddle-drawer-surface, 0 0% 0%);
    background: hsl(var(--buzz-huddle-drawer-surface));
  }

  .buzz-huddle-app-surface {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    box-shadow: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition:
      bottom 260ms var(--buzz-huddle-drawer-ease),
      border-bottom-left-radius 260ms var(--buzz-huddle-drawer-ease),
      border-bottom-right-radius 260ms var(--buzz-huddle-drawer-ease),
      box-shadow 260ms var(--buzz-huddle-drawer-ease);
    will-change:
      bottom, border-bottom-left-radius, border-bottom-right-radius, box-shadow;
  }

  .buzz-huddle-app-surface::after {
    background: hsl(var(--buzz-huddle-drawer-surface));
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: opacity 260ms var(--buzz-huddle-drawer-ease);
    z-index: 60;
  }

  .buzz-huddle-app-surface-open {
    border-bottom-left-radius: var(--buzz-huddle-drawer-radius);
    border-bottom-right-radius: var(--buzz-huddle-drawer-radius);
    bottom: var(--buzz-huddle-drawer-height);
    box-shadow:
      0 10px 24px -12px rgb(0 0 0 / 62%),
      0 2px 7px -4px rgb(0 0 0 / 42%);
  }

  .buzz-huddle-app-surface-open::after {
    opacity: 1;
  }

  .buzz-huddle-drawer {
    --buzz-huddle-drawer-surface: var(--huddle-drawer-surface, 0 0% 0%);
    --background: var(--buzz-huddle-drawer-surface);
    --foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: var(--huddle-control-surface, 0 0% 14.9%);
    --secondary-foreground: var(--huddle-control-foreground, 0 0% 98%);
    --muted: var(--huddle-control-chevron-surface, 0 0% 14.9%);
    --muted-foreground: 0 0% 63.9%;
    --accent: var(
      --huddle-control-hover-surface,
      var(--huddle-control-surface, 0 0% 14.9%)
    );
    --accent-foreground: 0 0% 98%;
    --popover: var(--buzz-huddle-drawer-surface);
    --popover-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;

    color-scheme: dark;
    background: hsl(var(--buzz-huddle-drawer-surface));
    overflow-x: auto;
    overflow-y: hidden;
  }

  .buzz-huddle-drawer::-webkit-scrollbar {
    display: none;
  }

  .buzz-huddle-popover {
    --buzz-huddle-popover-surface: var(
      --huddle-popover-surface,
      var(--huddle-control-chevron-surface, 0 0% 16%)
    );
    --background: var(--buzz-huddle-popover-surface);
    --foreground: var(--huddle-control-foreground, 0 0% 98%);
    --popover: var(--buzz-huddle-popover-surface);
    --popover-foreground: var(--foreground);
    --border: var(
      --huddle-popover-border,
      var(--huddle-control-hover-surface, 0 0% 24%)
    );

    background: hsl(var(--buzz-huddle-popover-surface));
    border-color: hsl(var(--border) / 0.6);
    box-shadow:
      0 6px 18px lch(0% 0 0 / 0.02),
      0 3px 9px lch(0% 0 0 / 0.04),
      0 1px 1px lch(0% 0 0 / 0.04);
    color: hsl(var(--foreground));
  }

  .buzz-huddle-headphones-hint {
    --background: var(
      --huddle-tooltip-surface,
      var(--huddle-control-surface, var(--secondary))
    );
    --foreground: var(
      --huddle-tooltip-foreground,
      var(--huddle-control-foreground, var(--secondary-foreground))
    );
    --popover: var(--background);
    --popover-foreground: var(--foreground);

    background: hsl(var(--background));
    box-shadow:
      0 6px 18px lch(0% 0 0 / 0.02),
      0 3px 9px lch(0% 0 0 / 0.04),
      0 1px 1px lch(0% 0 0 / 0.04);
    color: hsl(var(--foreground));
  }

  .buzz-huddle-mic-meter-bar {
    border-radius: 9999px;
    height: var(--buzz-huddle-meter-height, 0.25rem);
    transition: none;
    width: 0.25rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .buzz-side-panel-enter {
      animation: none;
      will-change: auto;
    }

    .buzz-huddle-app-surface {
      transition: none;
    }

    .buzz-huddle-mic-meter-bar {
      transition: none;
    }
  }

  .buzz-startup-shell {
    min-height: 100dvh;
    width: 100%;
  }

  .buzz-onboarding-neutral-theme {
    --background: 0 0% 100%;
    --foreground: 0 0% 9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 9%;
    --buzz-onboarding-emoji-picker-background: 245, 245, 245;
    --buzz-onboarding-emoji-picker-color: 23, 23, 23;
    --buzz-onboarding-emoji-picker-input: 255, 255, 255;
  }

  .dark .buzz-onboarding-neutral-theme {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --buzz-onboarding-emoji-picker-background: 38, 38, 38;
    --buzz-onboarding-emoji-picker-color: 250, 250, 250;
    --buzz-onboarding-emoji-picker-input: 10, 10, 10;
  }

  .buzz-onboarding-neutral-theme[data-system-color-scheme="light"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 9%;
    --buzz-onboarding-emoji-picker-background: 245, 245, 245;
    --buzz-onboarding-emoji-picker-color: 23, 23, 23;
    --buzz-onboarding-emoji-picker-input: 255, 255, 255;
  }

  .buzz-onboarding-neutral-theme[data-system-color-scheme="dark"] {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --buzz-onboarding-emoji-picker-background: 38, 38, 38;
    --buzz-onboarding-emoji-picker-color: 250, 250, 250;
    --buzz-onboarding-emoji-picker-input: 10, 10, 10;
  }

  .buzz-onboarding-transition-content {
    animation-delay: var(--buzz-onboarding-transition-delay, 0ms);
  }

  .buzz-onboarding-transition-line[data-onboarding-effect="line-slide"]
    > .buzz-onboarding-transition-content {
    animation-duration: 650ms;
    animation-fill-mode: backwards;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .buzz-onboarding-transition-line[data-onboarding-effect="line-slide"][data-onboarding-direction="forward"]
    > .buzz-onboarding-transition-content {
    animation-name: buzz-onboarding-line-slide-forward;
  }

  .buzz-onboarding-transition-line[data-onboarding-effect="line-slide"][data-onboarding-direction="backward"]
    > .buzz-onboarding-transition-content {
    animation-name: buzz-onboarding-line-slide-backward;
  }

  .buzz-onboarding-transition-line[data-onboarding-effect="mask-reveal-up"] {
    overflow: visible;
  }

  .buzz-onboarding-transition-line[data-onboarding-effect="mask-reveal-up"]
    > .buzz-onboarding-transition-content {
    animation: buzz-onboarding-mask-reveal-up 760ms
      cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--buzz-onboarding-transition-delay, 0ms);
    transform-origin: 50% 70%;
  }

  .buzz-onboarding-name-placeholder-caret {
    animation: buzz-onboarding-caret-blink 1.1s steps(1, end) infinite;
  }

  @keyframes buzz-onboarding-caret-blink {
    0%,
    55% {
      opacity: 1;
    }

    56%,
    100% {
      opacity: 0;
    }
  }

  @keyframes buzz-onboarding-line-slide-forward {
    from {
      opacity: 0;
      transform: translateX(48px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes buzz-onboarding-line-slide-backward {
    from {
      opacity: 0;
      transform: translateX(-48px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes buzz-onboarding-mask-reveal-up {
    from {
      filter: blur(8px);
      opacity: 0;
      transform: translate3d(0, 30px, 0) scale(0.985);
    }

    56% {
      filter: blur(2px);
      opacity: 0.86;
    }

    to {
      filter: blur(0);
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @media (max-width: 640px) {
    @keyframes buzz-onboarding-line-slide-forward {
      from {
        opacity: 0;
        transform: translateX(24px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes buzz-onboarding-line-slide-backward {
      from {
        opacity: 0;
        transform: translateX(-24px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .buzz-onboarding-transition-content {
      animation: none;
      filter: none;
      opacity: 1;
      transform: none;
    }

    .buzz-onboarding-name-placeholder-caret {
      animation: none;
    }
  }
}

@layer utilities {
  /*
   * Skips rendering (layout, paint) for offscreen rows while keeping them in
   * the DOM — unlike windowing, in-DOM state (open `<details>`, drag-and-drop,
   * deep-link `querySelector`) survives. The intrinsic size is a height
   * placeholder so the scrollbar stays stable before a row is first rendered.
   */
  .content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }

  .content-visibility-auto-interactive {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }

  .content-visibility-auto-interactive:is(:hover, :focus-within) {
    content-visibility: visible;
  }

  /* Compact variant for short single-line rows (sidebar channels, etc). */
  .content-visibility-auto-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 2rem;
  }

  .buzz-huddle-tooltip {
    --primary: var(
      --huddle-tooltip-surface,
      var(--huddle-control-surface, 0 0% 20%)
    );
    --primary-foreground: var(
      --huddle-tooltip-foreground,
      var(--huddle-control-foreground, 0 0% 98%)
    );

    background: hsl(var(--primary));
    border: 1px solid
      hsl(
        var(
          --huddle-control-chevron-hover-surface,
          var(--huddle-control-chevron-surface, 0 0% 22%)
        ) /
        0.72
      );
    box-shadow: 0 10px 22px rgb(0 0 0 / 35%);
    color: hsl(var(--primary-foreground));
  }

  .buzz-huddle-drawer .buzz-huddle-control-button,
  .buzz-huddle-drawer .buzz-huddle-split-main {
    background: hsl(var(--huddle-control-surface, var(--secondary)));
  }

  .buzz-huddle-drawer .buzz-huddle-control-button:hover,
  .buzz-huddle-drawer .buzz-huddle-split-main:hover {
    background: hsl(
      var(
        --huddle-control-hover-surface,
        var(--huddle-control-surface, var(--secondary))
      )
    );
  }

  .buzz-huddle-drawer .buzz-huddle-split-chevron {
    background: hsl(var(--huddle-control-chevron-surface, var(--secondary)));
  }

  .buzz-huddle-drawer .buzz-huddle-split-chevron:hover {
    background: hsl(
      var(
        --huddle-control-chevron-hover-surface,
        var(--huddle-control-chevron-surface, var(--secondary))
      )
    );
  }
}

/* ── Video player volume slider (shared/ui/VideoPlayer) ─────────────────
   Styled to match the slim white-on-glass media controls: a 4px rounded
   track whose filled portion is driven by the --video-volume-fill custom
   property, with a small white thumb. */
.video-volume-slider {
  appearance: none;
  background: transparent;
}

.video-volume-slider:focus-visible {
  outline: none;
}

.video-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    white var(--video-volume-fill, 100%),
    rgb(255 255 255 / 0.3) var(--video-volume-fill, 100%)
  );
}

.video-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -4px;
  height: 12px;
  width: 12px;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

.video-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.3);
}

.video-volume-slider::-moz-range-progress {
  height: 4px;
  border-radius: 9999px;
  background: white;
}

.video-volume-slider::-moz-range-thumb {
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

/* Animated avatar framing slider: a local DialKit-style control. */
.buzz-avatar-framing-slider-wrapper {
  position: relative;
  flex: 1;
}

.buzz-avatar-framing-slider {
  --buzz-avatar-framing-slider-fill: 50%;
  --buzz-avatar-framing-slider-fill-color: color-mix(
    in oklab,
    hsl(var(--foreground)) 10.5%,
    hsl(var(--background))
  );

  position: relative;
  height: 48px;
  width: 100%;
  overflow: visible;
  border: 1px solid hsl(var(--foreground) / 0.08);
  border-radius: 8px;
  background: hsl(var(--background));
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.buzz-avatar-framing-slider:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.42);
}

.buzz-avatar-framing-slider-hashmarks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.buzz-avatar-framing-slider-hashmark {
  position: absolute;
  top: 50%;
  padding: 0;
  height: 4px;
  width: 4px;
  border: 0;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.14);
  transform: translate(-50%, -50%);
  transition: background 180ms ease;
}

.buzz-avatar-framing-slider-hashmark[data-reset="true"] {
  top: 24px;
  z-index: 3;
  height: 4px;
  width: 4px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.buzz-avatar-framing-slider[data-active="true"]
  .buzz-avatar-framing-slider-hashmark[data-reset="true"],
.buzz-avatar-framing-slider-hashmark[data-reset="true"]:focus-visible {
  background: transparent;
}

.buzz-avatar-framing-slider-hashmark[data-reset="true"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3);
}

.buzz-avatar-framing-slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: var(--buzz-avatar-framing-slider-fill);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: 0;
  background: var(--buzz-avatar-framing-slider-fill-color);
  pointer-events: none;
  transition: background 150ms ease;
}

.buzz-avatar-framing-slider[data-active="true"]
  .buzz-avatar-framing-slider-fill {
  background: var(--buzz-avatar-framing-slider-fill-color);
}

.buzz-avatar-framing-slider-handle {
  position: absolute;
  top: 50%;
  left: clamp(5px, var(--buzz-avatar-framing-slider-fill), calc(100% - 5px));
  z-index: 2;
  width: 3px;
  height: calc(100% + 8px);
  border-radius: 9999px;
  background: hsl(var(--foreground));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(0.25);
  transition:
    opacity 150ms ease,
    transform 180ms ease;
}

.buzz-avatar-framing-slider[data-active="true"]
  .buzz-avatar-framing-slider-handle {
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(1);
}

.buzz-avatar-framing-slider-tip {
  position: relative;
  z-index: 10;
  margin: 8px auto 0;
  width: 100%;
  max-width: none;
  color: hsl(var(--muted-foreground) / 0.72);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.buzz-avatar-framing-slider-tip[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .buzz-avatar-framing-slider-tip {
    transform: none;
    transition: opacity 150ms ease;
  }
}

/* ── Image lightbox zoom slider (shared/ui/markdown) ───────────────────
   Matches the white-on-glass media control track used by the video player. */
.image-zoom-slider {
  appearance: none;
  background: transparent;
}

.image-zoom-slider:focus-visible {
  outline: none;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
}

.image-zoom-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    white var(--image-zoom-fill, 0%),
    rgb(255 255 255 / 0.3) var(--image-zoom-fill, 0%)
  );
}

.image-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -4px;
  height: 12px;
  width: 12px;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

.image-zoom-slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 0.25),
    0 1px 3px rgb(0 0 0 / 0.3);
}

.image-zoom-slider::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.3);
}

.image-zoom-slider::-moz-range-progress {
  height: 4px;
  border-radius: 9999px;
  background: white;
}

.image-zoom-slider::-moz-range-thumb {
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

.image-zoom-slider:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 0.25),
    0 1px 3px rgb(0 0 0 / 0.3);
}

/* ── Video review overlay theme (shared/ui/VideoPlayer) ─────────────────
   The review dialog uses the shadcn "neutral" dark palette regardless of
   the app theme. Applied together with `.dark` on the portal root; this
   block is intentionally unlayered so it overrides the layered theme vars. */
.video-review-theme {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
}

/* Indeterminate sweep for shared/ui/progress.tsx */
@keyframes progress-indeterminate {
  from {
    transform: translateX(-150%);
  }
  to {
    transform: translateX(400%);
  }
}