/* troupe-vars.css — CSS variable catalog (spec §6.2)
   API version: 2.1
   Themes override these in :root or any cascade level. Catalog grows
   additively in 2.x minor versions. */

:root {
  /* color */
  --troupe-app-bg: #1a1a2e;
  --troupe-app-text: #e0e0e0;
  --troupe-bubble-bg-mine: #4a90e2;
  --troupe-bubble-bg-theirs: #2a2a3e;
  --troupe-bubble-bg-system: #3a3a4e;
  --troupe-bubble-text-mine: #ffffff;
  --troupe-bubble-text-theirs: #e0e0e0;
  --troupe-bubble-border-mine: transparent;
  --troupe-bubble-border-theirs: rgba(255,255,255,0.06);
  --troupe-action-bar-bg: rgba(26,26,46,0.95);
  --troupe-action-bar-text: #e0e0e0;
  --troupe-emoji-picker-bg: #1a1a2e;
  --troupe-emoji-picker-text: #e0e0e0;
  --troupe-composer-bg: #2a2a3e;
  --troupe-composer-text: #e0e0e0;
  --troupe-composer-placeholder: rgba(224,224,224,0.4);

  /* layout */
  --troupe-spacing-xs: 4px;
  --troupe-spacing-sm: 8px;
  --troupe-spacing-md: 12px;
  --troupe-spacing-lg: 16px;
  --troupe-spacing-xl: 24px;
  --troupe-radius-sm: 4px;
  --troupe-radius-md: 8px;
  --troupe-radius-lg: 16px;
  --troupe-bubble-max-width: 70%;

  /* type */
  --troupe-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --troupe-font-family-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --troupe-font-size-sm: 12px;
  --troupe-font-size-md: 14px;
  --troupe-font-size-lg: 16px;
  --troupe-line-height: 1.5;

  /* z-index tokens (platform-respected) */
  --troupe-z-base: 0;
  --troupe-z-overlay: 100;
  --troupe-z-action-bar: 200;
  --troupe-z-modal: 1000;
  --troupe-z-gate: 2000;

  /* motion */
  --troupe-transition-fast: 150ms ease;
  --troupe-transition-medium: 300ms ease;
  --troupe-transition-slow: 600ms ease;
}

troupe-app {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--troupe-app-bg);
  color: var(--troupe-app-text);
  font-family: var(--troupe-font-family);
  font-size: var(--troupe-font-size-md);
  line-height: var(--troupe-line-height);
}

troupe-room-list,
troupe-message-list,
troupe-composer,
troupe-action-bar,
troupe-emoji-picker,
troupe-gate {
  display: block;
}

/* Floating components use position: absolute (NOT position: fixed) so they
 * scroll with content and remain anchored even when an ancestor (e.g.
 * <troupe-app>) creates a containing block via transform / filter /
 * container-type. position: fixed becomes "fixed relative to the nearest
 * transformed ancestor" rather than the viewport, which silently breaks
 * positioning on the kinds of mobile-sidebar / scroll-snap layouts themes
 * routinely use. troupe-vars.css ensures <troupe-app> itself is
 * `position: relative` so action-bar/emoji-picker have a sensible nearest
 * positioned ancestor to anchor against.
 *
 * Themes MAY override these to position: fixed (e.g. mandelbulb's overlay
 * camera frame) but should be aware that doing so re-imports the
 * containing-block trap. */
troupe-app {
  position: relative;
}

troupe-action-bar {
  position: absolute;
  z-index: var(--troupe-z-action-bar);
}

troupe-emoji-picker {
  position: absolute;
  z-index: var(--troupe-z-overlay);
}

troupe-gate {
  position: absolute;
  inset: 0;
  z-index: var(--troupe-z-gate);
}