/**
 * ai.css — Vicente Hernaiz Portfolio
 * Full-screen AI chat page (/ai)
 * Figma reference: node 573:4509 / 786:3394 / 786:4245
 *
 * Layout:
 *   .ai-main        → overrides .main; fills viewport height, no scroll
 *   .ai-screen      → full-height flex column; dark gradient bg
 *   .ai-landing     → centered pre-chat content (badge + headline)
 *   .ai-thread      → scrollable messages area (hidden until first send)
 *   .ai-input-area  → always-visible bottom input bar
 *   .ai-chips       → suggested questions below input (hidden on send)
 */

/* ─────────────────────────────────────────────────────────────
   SIDEBAR — purple right border per Figma desktop design
   ───────────────────────────────────────────────────────────── */
.page-ai .sidebar {
  border-right: 1px solid rgba(143, 0, 216, 0.61);
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT OVERRIDES
   ───────────────────────────────────────────────────────────── */
.main.ai-main {
  background:     transparent;
  height:         calc(100vh - var(--topbar-h));
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────────────────────────
   OUTER SCREEN — dark layered gradients from Figma
   Base: pure black
   + deep burgundy/rose ellipse at left-centre (main colour)
   + faint blue accent at top-right
   ───────────────────────────────────────────────────────────── */
.ai-screen {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  background:
    radial-gradient(ellipse 90% 70% at 0% 60%,
      rgba(51, 6, 47, 1)   0%,
      rgba(26, 3, 23, 1)  40%,
      rgba(13, 1, 12, 1)  65%,
      transparent         85%),
    radial-gradient(ellipse 60% 55% at 92% 10%,
      rgba(42, 0, 255, 0.23) 0%,
      transparent            70%),
    #000000;
}

/* Shared inner content width — mirrors Figma's 1168px container
   with 99px horizontal padding */
.ai-screen > * {
  width:     100%;
  max-width: calc(971px + 99px * 2); /* 1169px ≈ Figma 1168px */
  margin-left:  auto;
  margin-right: auto;
  padding-left:  99px;
  padding-right: 99px;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────
   LANDING — badge + headline; fills space above input
   ───────────────────────────────────────────────────────────── */
.ai-landing {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             48px;
  padding-top:     48px;
  padding-bottom:  24px;
  overflow:        hidden;
  transition:      opacity 0.3s ease;
}

.ai-landing.is-gone {
  display: none;
}

/* ── MY AI badge chip ── */
.ai-landing__badge {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        8px 12px;
  border-radius:  24px;
  border:         1px solid rgba(155, 135, 245, 0.18);
  background:     linear-gradient(180deg,
    rgba(155, 135, 245, 0.08) 0%,
    rgba(90,  79,  143, 0.08) 100%);
  font-family:    var(--font-text);
  font-size:      15px;
  font-weight:    400;
  letter-spacing: -0.8px;
  color:          #9b87f5;
  white-space:    nowrap;
}

/* ── Headline row ── */
.ai-landing__headline {
  display:     flex;
  align-items: center;
  gap:         17px;
}

/* Figma: 32px / Work Sans regular / centered */
.ai-landing__headline h1 {
  font-family:    var(--font-headings);
  font-size:      clamp(26px, 3vw, 32px);
  font-weight:    400;
  letter-spacing: 0px;
  line-height:    40px;
  color:          var(--white);
}

/* ─────────────────────────────────────────────────────────────
   CONVERSATION THREAD
   ───────────────────────────────────────────────────────────── */
.ai-thread {
  display:         none;
  flex-direction:  column;
  gap:             32px;
  flex:            1;
  overflow-y:      auto;
  padding-top:     40px;
  padding-bottom:  20px;
  scroll-behavior: smooth;
}

.ai-thread.is-active { display: flex; }

.ai-thread::-webkit-scrollbar       { width: 4px; }
.ai-thread::-webkit-scrollbar-track { background: transparent; }
.ai-thread::-webkit-scrollbar-thumb { background: rgba(155,135,245,0.2); border-radius: 2px; }

/* ── Message row ── */
.ai-msg {
  display:   flex;
  gap:       10px;
  animation: ai-msg-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes ai-msg-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-msg--user { justify-content: flex-end; }

/* ── AI avatar circle — 44px smiley (Figma: border-radius 30px) ── */
.ai-msg__avatar {
  width:           44px;
  height:          44px;
  min-width:       44px;
  border-radius:   30px;
  background:      rgba(170, 172, 241, 0.07);
  border:          1px solid rgba(170, 172, 241, 0.11);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* ── User avatar circle — same size and style as AI avatar ── */
.ai-msg__user-avatar {
  width:           44px;
  height:          44px;
  min-width:       44px;
  border-radius:   30px;
  background:      rgba(170, 172, 241, 0.07);
  border:          1px solid rgba(170, 172, 241, 0.11);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* ── Shared bubble — both AI and user messages ── */
.ai-msg__bubble {
  background:    rgba(170, 172, 241, 0.07);
  border:        1px solid rgba(170, 172, 241, 0.11);
  border-radius: 8px;
  padding:       20px 24px;
  font-family:   var(--font-mono);
  font-size:     12px;
  font-weight:   400;
  line-height:   16px;
  color:         rgba(255, 255, 255, 0.92);
  white-space:   pre-wrap;
  word-break:    break-word;
  max-width:     75%;
}

/* AI bubbles can span more of the available width */
.ai-msg--ai .ai-msg__bubble {
  max-width: calc(100% - 54px);
}

/* ── AI text content ── */
.ai-msg__text {
  font-family: var(--font-mono);
  font-size:   12px;
  font-weight: 400;
  line-height: 24px;
  color:       rgba(255, 255, 255, 0.92);
  white-space: pre-wrap;
  word-break:  break-word;
}

.ai-msg__text--error { color: rgba(255, 110, 110, 0.85); }

/* ── Clickable links inside AI responses ── */
.ai-link {
  color:           rgba(155, 135, 245, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-link:hover { color: #9b87f5; }

/* ── Blinking cursor during typewriter ── */
.ai-cursor {
  display:        inline-block;
  width:          2px;
  height:         0.9em;
  background:     rgba(155, 135, 245, 0.75);
  margin-left:    2px;
  vertical-align: text-bottom;
  border-radius:  1px;
  animation:      ai-cursor-blink 0.7s step-end infinite;
}

@keyframes ai-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Thinking / loading state ── */
.ai-thinking {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     4px 0;
}

.ai-thinking__ring {
  width:         18px;
  height:        18px;
  border-radius: 50%;
  border:        2px solid rgba(155, 135, 245, 0.14);
  border-top-color: rgba(155, 135, 245, 0.82);
  flex-shrink:   0;
  animation:     ai-spin 0.75s linear infinite;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

.ai-thinking__label {
  font-family:    var(--font-mono);
  font-size:      14px;
  font-weight:    400;
  color:          rgba(155, 135, 245, 0.62);
  letter-spacing: -0.1px;
}

.ai-thinking__label.is-new {
  animation: ai-phase-in 0.32s cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes ai-phase-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   INPUT AREA — always pinned at the bottom
   Figma: bg rgba(135,141,234,0.45), border #36004d,
          send button bg #4c006d, border #878dea
          align-items: flex-start so send btn stays at top corner
   ───────────────────────────────────────────────────────────── */
.ai-input-area {
  flex-shrink:    0;
  padding-top:    16px;
  padding-bottom: 40px;
}

.ai-input-area__wrap {
  display:       flex;
  align-items:   flex-start;
  background:    rgba(135, 141, 234, 0.45);
  border:        1px solid #36004d;
  border-radius: 8px;
  padding:       2px;
  transition:    background 0.2s ease, border-color 0.2s ease;
  overflow:      hidden;
}

.ai-input-area__wrap:focus-within {
  background:   rgba(135, 141, 234, 0.58);
  border-color: rgba(135, 141, 234, 0.6);
}

.ai-input-area__field {
  flex:        1;
  min-height:  44px;
  max-height:  200px;
  padding:     10px 16px;
  background:  transparent;
  border:      none;
  resize:      none;
  outline:     none;
  font-family: var(--font-text);
  font-size:   16px;
  font-weight: 400;
  line-height: 24px;
  color:       var(--white);
  overflow-y:  auto;
}

/* Figma placeholder color: #3c4078 */
.ai-input-area__field::placeholder { color: #3c4078; }

.ai-input-area__send {
  width:           48px;
  height:          48px;
  flex-shrink:     0;
  background:      #4c006d;
  border:          2px solid #878dea;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background 0.2s ease, opacity 0.2s;
}
.ai-input-area__send:hover    { background: #6d00a0; }
.ai-input-area__send:disabled { opacity: 0.45; cursor: default; }

/* ─────────────────────────────────────────────────────────────
   SUGGESTED CHIPS
   Figma: chip h=48px, px=24px, bg rgba(170,172,241,0.07),
          border rgba(170,172,241,0.11), text #e8c6fd
   ───────────────────────────────────────────────────────────── */
.ai-chips {
  flex-shrink:    0;
  padding-bottom: 40px;
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.ai-chips.is-gone { display: none; }

/* Header row */
.ai-chips__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.ai-chips__header-left {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-family: var(--font-text);
  font-size:   13px;
  font-weight: 500;
  color:       #fff;
}

.ai-chips__view-all {
  font-family:     var(--font-text);
  font-size:       14px;
  color:           rgba(255, 255, 255, 0.6);
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             4px;
  transition:      color 0.2s;
}
.ai-chips__view-all:hover { color: rgba(255, 255, 255, 0.9); }

/* Horizontal chip row — matches Figma desktop flex row */
.ai-chips__grid {
  display:    flex;
  flex-wrap:  nowrap;
  gap:        12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.ai-chips__grid::-webkit-scrollbar { display: none; }

.ai-chip {
  flex-shrink: 0;
  height:        32px;
  padding:       0 24px;
  background:    rgba(170, 172, 241, 0.07);
  border:        1px solid rgba(170, 172, 241, 0.11);
  border-radius: 8px;
  font-family:   var(--font-text);
  font-size:     12px;
  font-weight:   400;
  line-height:   20px;
  color:         #e8c6fd;
  text-align:    center;
  cursor:        pointer;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  transition:    background 0.2s ease, border-color 0.2s ease;
}
.ai-chip:hover {
  background:   rgba(170, 172, 241, 0.15);
  border-color: rgba(170, 172, 241, 0.3);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ai-screen > * {
    padding-left:  40px;
    padding-right: 40px;
  }
  .ai-landing__headline h1 { font-size: clamp(22px, 3.5vw, 32px); }
}

@media (max-width: 640px) {
  .ai-screen > * {
    padding-left:  20px;
    padding-right: 20px;
    max-width:     100%;
  }

  .ai-landing {
    gap:            28px;
    padding-top:    24px;
    padding-bottom: 16px;
  }

  .ai-landing__headline {
    flex-direction: column;
    gap:            12px;
    text-align:     center;
  }

  .ai-landing__headline h1 {
    font-size:  26px;
    white-space: normal;
  }

  .ai-chip {
    white-space: nowrap;
  }

  /* Mobile bubble overrides */
  .ai-msg__bubble {
    max-width: 80%;
    padding:   16px;
  }

  /* AI bubbles on mobile still get wider allowance */
  .ai-msg--ai .ai-msg__bubble {
    max-width: calc(100% - 54px);
  }

  .ai-input-area { padding-bottom: 24px; }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE — Figma design (node 786:2667)
   Full-screen AI chat, floating card nav, horizontal chips
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Hide the topbar — mobile-nav card replaces it */
  .page-ai .topbar { display: none; }

  /* Fill full viewport now that topbar is gone */
  .page-ai .main.ai-main {
    height: 100vh;
    height: 100dvh;
  }

  /* Accent the mobile-nav card border to match Figma's purple */
  .page-ai .mobile-nav__bar {
    border-color: rgba(143, 0, 216, 0.61);
  }

  /* ── Landing: center vertically, clear the floating nav ── */
  .page-ai .ai-landing {
    padding-top:    96px;
    padding-bottom: 24px;
    gap:            24px;
    justify-content: center;
  }

  /* Remove chip look from badge on mobile — just icon + label */
  .page-ai .ai-landing__badge {
    background: transparent;
    border:     none;
    padding:    0;
    gap:        10px;
    font-size:  15px;
    letter-spacing: -0.8px;
  }

  .page-ai .ai-landing__headline {
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    text-align:     center;
  }

  .page-ai .ai-landing__headline h1 {
    font-size:      20px;
    font-weight:    400;
    line-height:    32px;
    letter-spacing: -0.2px;
  }

  /* Conversation thread: pad top to clear fixed nav */
  .page-ai .ai-thread {
    padding-top: 80px;
  }

  /* ── Chips: horizontal scrolling single row ── */
  .page-ai .ai-chips {
    gap:            8px;
    padding-bottom: 8px;
  }

  .page-ai .ai-chips__view-all { display: none; }

  .page-ai .ai-chips__grid {
    display:                    flex;
    flex-direction:             row;
    grid-template-columns:      none;
    overflow-x:                 auto;
    scrollbar-width:            none;
    -webkit-overflow-scrolling: touch;
    gap:                        12px;
    padding-bottom:             4px;
  }

  .page-ai .ai-chips__grid::-webkit-scrollbar { display: none; }

  .page-ai .ai-chip {
    flex-shrink:  0;
    height:       32px;
    padding:      0 20px;
    white-space:  nowrap;
    text-align:   center;
    font-size:    14px;
    line-height:  32px;
  }

  /* Input bottom padding */
  .page-ai .ai-input-area { padding-bottom: 48px; }
}