/* katie_aura.css
 * External layout hooks for <katie-aura> in the Bridge.
 * All visual styling lives inside the element's Shadow DOM (katie_aura.js).
 * This file is just for how the element sits in the surrounding page.
 *
 * Phase A1 of the Katie Donna build (2026-05-22).
 */

/* Full-size: the centerpiece of the Bridge welcome state. */
katie-aura[size="full"] {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1.7;
  margin: 4px auto 12px auto;
  /* No background — the WebGL canvas inside is transparent and the
   * Bridge's dark background shows through. */
}

/* Mini: inline avatar replacement (chat per-message buttons, etc.). */
katie-aura[size="mini"] {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

/* Inline: small badge/preview (for headers, notification chips). */
katie-aura[size="inline"] {
  display: inline-block;
  width: 64px;
  height: 48px;
  vertical-align: middle;
}

/* Tighten spacing in the bridge-messages welcome stack where the Aura
 * replaces the 🌅 emoji block. */
.bridge-messages katie-aura[size="full"] {
  margin-top: 0;
  margin-bottom: 4px;
}

/* Persistent Aura zone in the Bridge chat pane — sibling of bridge-messages.
 * Lives outside bridge-messages so it survives Start Briefing / Hey Katie
 * which reset that container's innerHTML. */
.bridge-aura-zone {
  flex: 0 0 auto;
  padding: 8px 16px 4px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #16213e;
}
.bridge-aura-zone katie-aura[size="full"] {
  margin: 0;
  max-width: 360px;
}