/*
  Medic Raptor - Pagina de assistente (chat)
  Esta folha veste o console numa pagina com header, hero de apresentacao,
  secao "Como usar" e area do chat. O visor tatico em si continua em
  components.css.
*/

/* ---------- Hero estatico de apresentacao ---------- */

.assistant-hero {
  position: relative;
  background: var(--raptor-black);
  padding-block: var(--space-8) var(--space-7);
  overflow: hidden;
}

.assistant-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 0% 0%, black, transparent 75%);
  opacity: 0.35;
}

.assistant-hero__content {
  position: relative;
  z-index: 1;
}

.assistant-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-4);
}

.assistant-hero__title {
  font-size: clamp(var(--fs-700), 5vw, var(--fs-800));
  line-height: var(--lh-tight);
  max-width: 24ch;
}

.assistant-hero__tagline {
  margin-top: var(--space-2);
  color: var(--text-accent);
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.assistant-hero__description {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: clamp(var(--fs-300), 1.5vw, var(--fs-400));
  max-width: 60ch;
}

/* ---------- Retrato do especialista ---------- */

.assistant-hero--with-portrait .assistant-hero__content {
  --assistant-portrait-width: clamp(76px, 24vw, 112px);
  --assistant-portrait-height: clamp(122px, 38.4vw, 179px);
  min-height: calc(var(--assistant-portrait-height) + var(--space-6));
}

.assistant-hero--with-portrait .assistant-hero__title,
.assistant-hero--with-portrait .assistant-hero__tagline {
  max-width: calc(100% - var(--assistant-portrait-width) - var(--space-3));
}

.assistant-hero--with-portrait .assistant-hero__description {
  max-width: calc(100% - var(--assistant-portrait-width) - var(--space-3));
}

.assistant-hero__portrait {
  position: absolute;
  top: calc(1.2rem + var(--space-4));
  right: 0;
  width: var(--assistant-portrait-width);
  aspect-ratio: 5 / 8;
  overflow: hidden;
}

.assistant-hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

@media (min-width: 480px) {
  .assistant-hero--with-portrait .assistant-hero__content {
    --assistant-portrait-width: min(38vw, 220px);
    --assistant-portrait-height: min(60.8vw, 352px);
  }
}

@media (min-width: 768px) {
  .assistant-hero--with-portrait .assistant-hero__content {
    --assistant-portrait-width: min(28vw, 260px);
    --assistant-portrait-height: min(44.8vw, 416px);
  }

  .assistant-hero--with-portrait .assistant-hero__title,
  .assistant-hero--with-portrait .assistant-hero__tagline,
  .assistant-hero--with-portrait .assistant-hero__description {
    max-width: 24ch;
  }
}

@media (min-width: 1024px) {
  .assistant-hero--with-portrait .assistant-hero__content {
    --assistant-portrait-width: clamp(200px, 19vw, 320px);
    --assistant-portrait-height: clamp(320px, 30.4vw, 512px);
  }

  .assistant-hero--with-portrait .assistant-hero__portrait {
    right: var(--space-10);
  }

  .assistant-hero--with-portrait .assistant-hero__description {
    max-width: 60ch;
  }

  .assistant-hero--with-portrait .assistant-hero__tagline {
    max-width: 60ch;
  }
}

/* ---------- Como usar ---------- */

.assistant-howto__steps {
  list-style: none;
  counter-reset: howto;
  padding: 0;
  margin: 0;
}

.assistant-howto__steps li {
  counter-increment: howto;
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
}

.assistant-howto__steps li::before {
  content: counter(howto);
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  color: var(--text-accent);
}

.assistant-howto__example {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  background: transparent;
}

.assistant-howto__example-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.assistant-howto__example-text {
  color: var(--text-primary);
  font-style: italic;
}

.assistant-howto__example-action {
  margin-top: var(--space-4);
}

/* ---------- Secao do console de chat ---------- */

.assistant-chat-section {
  padding-block: 0 var(--space-9);
}