/* ============================================================================
   Assistant UI skin -- matches the reference mockup exactly.
   Pure-black surface, a large cool-plasma hero orb at top center, Claire's
   replies left-aligned with a small orb and no bubble, your messages in a
   neutral grey bubble, and a pill composer with a mic + a gradient send circle.

   Additive + scoped to body.assistant-ui (set by assistant.js). Reuses the
   tokenized chat so overriding the tokens recolors most of it; the rest is
   targeted. Deletes nothing in the underlying iOS shell.
   ============================================================================ */

/* ---- Palette tokens (force black + neutral, regardless of system theme) ---- */
body.assistant-ui {
  --bg: #050507;
  --text: #f1eef3;
  --gray-bubble: rgba(120, 120, 136, 0.20);  /* user bubble: neutral grey */
  --gray-text: #7c7c86;
  --hairline: rgba(255, 255, 255, 0.07);
  --blue: #4a8cff;                            /* cool accent (send/links) */
  --header-bg: transparent;
  --composer-bg: rgba(8, 8, 11, 0.92);
  background: #050507;
}

/* ---- Strip the phone + the old header bar --------------------------------- */
body.assistant-ui .home-screen,
body.assistant-ui .home-indicator,
body.assistant-ui .notification-layer,
body.assistant-ui #notif-banner,
body.assistant-ui .messages-topbar { display: none !important; }

body.assistant-ui .app-container { transition: none; }
body.assistant-ui .app-screen[data-app="messages"] { background: #050507; }
body.assistant-ui #messages { background: transparent; padding: 6px 14px 14px; }

/* ---- Hero orb: large, top-center, floating in black ----------------------- */
body.assistant-ui #assistant-hero {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 20px) 0 16px;
  background: #050507;
}
body.assistant-ui #assistant-hero .orb {
  width: 150px; height: 150px; cursor: pointer;
}

/* ---- Claire's messages: mini orb on the left, no bubble ------------------- */
body.assistant-ui .message-line.claire {
  position: relative;
  padding-left: 36px;
}
body.assistant-ui .message-line.claire::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%,
      #ddf6ff 0%, #66cfff 26%, #6a7bff 52%, #b455ff 74%, #182645 100%);
  box-shadow: 0 0 7px rgba(110, 150, 255, 0.45);
}
body.assistant-ui .bubble.claire,
body.assistant-ui .bubble.claire.not-last-in-group {
  background: transparent;
  color: var(--text);
  padding-left: 0;
  padding-right: 8px;
  border-radius: 0;
}

/* ---- Your messages: neutral grey bubble, no iMessage blue ----------------- */
body.assistant-ui .bubble.user,
body.assistant-ui .bubble.user.not-last-in-group {
  background: var(--gray-bubble);
  color: #ffffff;
  border-radius: 20px;
}

/* ---- Composer: pill (text + mic) and a separate gradient send circle ------ */
body.assistant-ui #composer-bar {
  background: var(--composer-bg);
  border-top: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
}
body.assistant-ui .composer-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Tasteful shading: brighter at the center, dimming toward the edges. */
  background:
    radial-gradient(130% 220% at 50% 50%,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.05) 55%,
      rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 7px 14px;
}
body.assistant-ui #composer {
  flex: 1 1 auto;
  background: transparent;
  color: var(--text);
  border: none;
}
body.assistant-ui #composer::placeholder { color: var(--gray-text); }

/* Timestamps scrapped: no swipe-to-reveal time under messages. */
body.assistant-ui .msg-time { display: none !important; }

/* Send: a separate gradient circle, lifted out of the pill by assistant.js. */
body.assistant-ui #composer-bar > #send {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, #3a8dff 0%, #9b5cff 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none;
}
body.assistant-ui #composer-bar > #send:disabled { opacity: 0.4; }
body.assistant-ui #composer-bar > #send svg { width: 19px; height: 19px; }