/**
 * ORAN — the assistant console (packages/ui/src/features/assistant/OranConsole).
 *
 * Painted in the theme's own language rather than a "chat app" one: the poster-lit
 * face, the accent bloom, the lit hairline, the serif caps and the black plate are
 * the same recipe the promo title-cards use (promotions.css), so on bababet the
 * console reads as part of a Godfather-red house and on the blue theme it re-skins
 * with one variable. Every colour below comes from `--accent`, `--panel*` or
 * `--bg-deep` — nothing is a literal, so a new theme folder needs no rule here.
 */

.oran {
  --oran-tint: var(--accent);
  --oran-gold: color-mix(in srgb, var(--oran-tint) 72%, var(--white));
  --oran-plate: color-mix(in srgb, #000 74%, transparent);
  /* The thread is a window, not a page: it scrolls inside itself so the composer
     never leaves the screen. Capped against the viewport on short phones. */
  --oran-thread: clamp(300px, 56vh, 460px);

  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 16px;
  border: var(--promo-card-border, 0);
  border-radius: var(--promo-card-radius, var(--r-3xl));
  overflow: hidden;

  background:
    radial-gradient(120% 70% at 82% -6%, color-mix(in srgb, var(--oran-tint) 16%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 62%, #000), var(--bg-deep));
  box-shadow: var(
    --promo-card-shadow,
    0 14px 34px -24px var(--black-a95),
    0 0 22px -10px var(--accent-a50)
  );
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.oran-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--oran-tint) 9%, transparent), transparent);
}

/* The lit hairline the promo stage draws under its art — the seam that says
   "this panel is a lit object", and the only border on the console. */
.oran-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oran-gold) 50%, transparent);
  opacity: 0.45;
}

.oran-face {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--oran-tint) 40%, transparent), transparent 70%);
}

.oran-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 4px 8px var(--black-a60));
}

.oran-live {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--oran-gold);
  box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 0 var(--accent-a55);
  animation: oran-pulse 2.2s ease-out infinite;
}

@keyframes oran-pulse {
  0% { box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 0 var(--accent-a55); }
  70% { box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 0 transparent; }
}

.oran-id {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.oran-id strong {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--oran-gold) 40%, var(--white)), var(--oran-tint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.oran-id small {
  color: var(--muted-5);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.oran-head-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 11px;
  border-radius: var(--promo-plate-radius, var(--r-pill));
  background: var(--oran-plate);
  color: color-mix(in srgb, var(--oran-gold) 62%, var(--white));
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.oran-head-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.oran-head-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--oran-tint) 26%, #000);
  color: var(--white);
}

.oran-head-btn-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
}

/* On a phone the header is already carrying a face, a name and a role: the
   reset button keeps its plus and drops its word. */
.oran-head-btn-label {
  display: none;
}

.oran-head-btn-icon svg,
.oran-games-all-icon svg,
.oran-starter-icon svg,
.oran-starter-go svg,
.oran-action-go svg,
.oran-escalate-icon svg,
.oran-send svg {
  width: 100%;
  height: 100%;
}

/* ── Thread ─────────────────────────────────────────────────────────────── */

.oran-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: var(--oran-thread);
  padding: 16px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.oran-welcome {
  /* `flex: none` is load-bearing: the thread is a flex column, so without it the
     welcome SHRINKS to fit instead of scrolling and the last starter is clipped
     with no way to reach it. */
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: auto 0;
  text-align: center;
}

/* The face is in the header, three lines up, and on every reply's avatar. On a
   phone a third portrait costs 140px of a 460px window — the starters matter
   more, so it shows on desktop only. */
.oran-welcome-face {
  display: none;
  position: relative;
  width: 92px;
  margin: 0 0 2px;
}

.oran-welcome-face img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px var(--accent-a25));
}

.oran-welcome > p {
  margin: 0;
  max-width: 420px;
  color: var(--muted-5);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.5;
}

.oran-starters {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.oran-starter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--promo-plate-radius, var(--r-lg));
  background: linear-gradient(180deg, color-mix(in srgb, var(--oran-tint) 8%, var(--white-a05)), transparent);
  color: var(--text);
  text-align: left;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
  transition: background 0.18s ease, translate 0.18s ease;
}

.oran-starter:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--oran-tint) 20%, var(--white-a05)), transparent);
  translate: 0 -1px;
}

.oran-starter-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--oran-gold);
}

.oran-starter-go {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: var(--muted-3);
  transition: translate 0.18s ease, color 0.18s ease;
}

.oran-starter:hover .oran-starter-go {
  translate: 3px 0;
  color: var(--oran-gold);
}

/* ── Turns ──────────────────────────────────────────────────────────────── */

.oran-turn {
  display: flex;
  gap: 9px;
  max-width: 100%;
  animation: oran-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes oran-in {
  from { opacity: 0; translate: 0 8px; }
}

.oran-turn--you {
  justify-content: flex-end;
}

.oran-turn--you .oran-bubble {
  max-width: 84%;
  border-radius: var(--r-lg) var(--r-hair) var(--r-lg) var(--r-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--oran-tint) 88%, #000), color-mix(in srgb, var(--oran-tint) 55%, #000));
  color: var(--on-accent, var(--white));
  font-weight: 700;
}

.oran-mark {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--oran-tint) 45%, transparent), var(--oran-plate));
}

.oran-mark img {
  width: 118%;
  height: auto;
}

.oran-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.oran-bubble {
  padding: 11px 14px;
  border-radius: var(--r-hair) var(--r-lg) var(--r-lg) var(--r-lg);
  background: var(--oran-plate);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.oran-turn--oran .oran-bubble {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--oran-tint) 55%, transparent);
}

.oran-turn.is-miss .oran-bubble {
  box-shadow: inset 2px 0 0 var(--muted-3);
}

.oran-bubble--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 15px 14px;
}

.oran-bubble--typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oran-gold);
  opacity: 0.35;
  animation: oran-think 1.1s ease-in-out infinite;
}

.oran-bubble--typing i:nth-child(2) { animation-delay: 0.15s; }
.oran-bubble--typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes oran-think {
  0%, 100% { opacity: 0.28; translate: 0 0; }
  40% { opacity: 1; translate: 0 -3px; }
}

/* ── What an answer hands you ───────────────────────────────────────────── */

.oran-action,
.oran-escalate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: var(--promo-plate-radius, var(--r-xs));
  background: color-mix(in srgb, var(--oran-tint) 14%, var(--white-a05));
  color: color-mix(in srgb, var(--oran-gold) 62%, var(--white));
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.oran-action:hover,
.oran-escalate:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--oran-gold) 82%, var(--white)), var(--oran-tint));
  color: var(--accent-black, #000);
}

.oran-action-go {
  display: inline-flex;
  width: 14px;
  height: 14px;
  transition: translate 0.2s ease;
}

.oran-action:hover .oran-action-go,
.oran-escalate:hover .oran-action-go {
  translate: 3px 0;
}

.oran-escalate-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
}

/* Catalog results — the search box, folded into the answer. */

.oran-games {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, #000 46%, transparent);
}

.oran-games-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.oran-games-row::-webkit-scrollbar {
  display: none;
}

.oran-game {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: var(--text);
}

.oran-game img {
  width: 100%;
  aspect-ratio: var(--game-art);
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--panel);
  transition: scale 0.2s ease;
}

.oran-game:hover img {
  scale: 1.04;
}

.oran-game strong {
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.oran-game small {
  color: var(--muted-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.oran-games-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: var(--white-a05);
  color: var(--muted-6);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.oran-games-all-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--oran-gold);
}

.oran-games-all:hover {
  background: color-mix(in srgb, var(--oran-tint) 22%, transparent);
  color: var(--white);
}

.oran-next-chip {
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--white-a05);
  color: var(--muted-6);
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
  transition: background 0.18s ease, color 0.18s ease;
}

.oran-next-chip:hover {
  background: color-mix(in srgb, var(--oran-tint) 20%, transparent);
  color: var(--white);
}

.oran-next {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oran-next-chip {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--white-a10);
  color: color-mix(in srgb, var(--oran-gold) 40%, var(--white));
}

/* ── Composer ───────────────────────────────────────────────────────────── */

.oran-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 13px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--oran-tint) 7%, transparent), transparent);
}

.oran-composer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oran-gold) 50%, transparent);
  opacity: 0.28;
}

.oran-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-xl);
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--white-a08);
  transition: box-shadow 0.18s ease;
}

.oran-input:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oran-tint) 50%, transparent), 0 0 0 3px var(--accent-a16);
}

.oran-field {
  flex: 1;
  min-width: 0;
  /* Autosized in JS up to this cap, then the textarea scrolls itself. */
  max-height: 132px;
  padding: 8px 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.45;
  resize: none;
}

.oran-field:focus {
  outline: none;
}

.oran-field::placeholder {
  color: var(--muted-2);
  font-weight: 600;
}

.oran-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--oran-gold) 82%, var(--white)), var(--oran-tint));
  color: var(--accent-black, #000);
  box-shadow: var(--shadow-accent);
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.oran-send:disabled {
  background: var(--white-a08);
  color: var(--muted-2);
  box-shadow: none;
  cursor: default;
}

.oran-note {
  margin: 0;
  color: var(--muted-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .oran-live,
  .oran-bubble--typing i,
  .oran-turn {
    animation: none;
  }
}

/* ── Desktop ────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .oran {
    --oran-thread: clamp(360px, 52vh, 560px);
    margin: 0;
  }

  .oran-head {
    padding: 14px 20px;
  }

  .oran-head-btn-label {
    display: inline;
  }

  .oran-face {
    width: 46px;
    height: 46px;
  }

  .oran-id strong {
    font-size: var(--fs-3xl);
  }

  .oran-thread {
    gap: 20px;
    padding: 22px 20px;
  }

  .oran-welcome-face {
    display: block;
  }

  .oran-welcome > p {
    font-size: var(--fs-lg);
  }

  /* Two-up starters: the empty state is the widest thing on the page and a
     single column of four leaves the console looking unfinished. */
  .oran-starters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 620px;
  }

  .oran-turn--you .oran-bubble {
    max-width: 72%;
  }

  .oran-body {
    max-width: 76%;
    flex: 0 1 auto;
  }

  .oran-bubble {
    font-size: var(--fs-lg);
  }

  .oran-games-row {
    grid-auto-columns: 132px;
  }

  .oran-composer {
    padding: 14px 20px 16px;
  }
}