/* ============================================================
   AppMind — pastel iridescent AI-companion design system
   Tokens + components. Motion behavior in appmind.js.
   ============================================================ */

:root {
  --am-aurora-1: #E3D9FA;
  --am-aurora-2: #E4CFFF;
  --am-aurora-3: #D1E3FF;
  --am-violet: #8149F5;
  --am-violet-2: #A975FF;
  --am-ink: #2E2F4A;
  --am-dim: #7A7C96;
  --am-bubble-user: #E1C9FF;
  --am-chip: #F3EAFB;
  --am-screen: #FBFAFF;
  --am-white: #FFFFFF;
  --am-code: #F6F5FA;
  --am-grad: linear-gradient(135deg, #A975FF, #8149F5);
  --am-grad-soft: linear-gradient(135deg, #E9CFFF, #D1B5FE);
  --am-hairline: rgba(46, 47, 74, 0.08);
  --am-haze: 0 8px 30px rgba(90, 60, 160, 0.08);
  --am-haze-lg: 0 30px 80px rgba(90, 60, 160, 0.22);
  --am-haze-bar: 0 12px 40px rgba(90, 60, 160, 0.14);
  --am-glow: 0 10px 24px rgba(129, 73, 245, 0.35);

  --am-font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --am-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --am-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- base ---------- */

.am-page, .am-page * { box-sizing: border-box; }
.am-page {
  margin: 0;
  font-family: var(--am-font);
  color: var(--am-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- aurora canvas ---------- */

.am-canvas {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--am-aurora-1) 0%, var(--am-aurora-2) 45%, var(--am-aurora-3) 100%);
}
.am-canvas::before,
.am-canvas::after {
  content: "";
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.am-canvas::before {
  top: -22vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(242, 205, 249, 0.9), rgba(242, 205, 249, 0) 65%);
  animation: am-drift-a 18s ease-in-out infinite alternate;
}
.am-canvas::after {
  bottom: -24vmax; left: -12vmax;
  background: radial-gradient(circle, rgba(190, 216, 255, 0.9), rgba(190, 216, 255, 0) 65%);
  animation: am-drift-b 15s ease-in-out infinite alternate;
}
@keyframes am-drift-a { from { transform: translate(0, 0); } to { transform: translate(-6vmax, 5vmax); } }
@keyframes am-drift-b { from { transform: translate(0, 0); } to { transform: translate(5vmax, -5vmax); } }

/* ---------- phone frame ---------- */

.am-phone {
  position: relative;
  width: min(340px, 88vw);
  padding: 11px;
  border-radius: 52px;
  background: var(--am-white);
  box-shadow: var(--am-haze-lg);
}
.am-phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 640px;
  border-radius: 41px;
  background: var(--am-screen);
  overflow: hidden;
}
.am-phone__screen > * { position: relative; z-index: 1; }

.am-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--am-ink);
}
.am-statusbar__icons { display: inline-flex; gap: 5px; align-items: center; opacity: 0.75; }

.am-homebar {
  margin: auto auto 8px;
  width: 110px; height: 4px;
  border-radius: 999px;
  background: rgba(46, 47, 74, 0.75);
}

/* screen interior scaffolding */
.am-screen { display: flex; flex-direction: column; gap: 16px; padding: 8px 20px 20px; flex: 1; }

/* ---------- type ---------- */

.am-title { margin: 0; font-size: 28px; line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; color: var(--am-ink); }
.am-sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--am-dim); }
.am-meta { font-size: 10.5px; color: var(--am-dim); }

/* ---------- iridescent orb ---------- */

.am-orb {
  position: relative;
  width: 180px; height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 28% 30%, #F0B8F5 0%, rgba(240, 184, 245, 0) 55%),
    radial-gradient(circle at 74% 36%, #BED2FF 0%, rgba(190, 210, 255, 0) 60%),
    radial-gradient(circle at 52% 84%, #C5BDFB 0%, rgba(197, 189, 251, 0) 62%),
    radial-gradient(circle at 90% 88%, rgba(196, 240, 224, 0.9), rgba(196, 240, 224, 0) 45%),
    linear-gradient(150deg, #E9CFF9 0%, #C8BEF8 50%, #AFCDF6 100%);
  box-shadow:
    inset -16px -20px 44px rgba(129, 73, 245, 0.30),
    inset 10px 12px 30px rgba(255, 255, 255, 0.65),
    0 26px 50px rgba(129, 73, 245, 0.28);
  animation: am-float 6s ease-in-out infinite;
}
.am-orb--sm { width: 120px; height: 120px; }
.am-orb--lg { width: 220px; height: 220px; }
@keyframes am-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- buttons ---------- */

.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--am-font);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}
.am-btn--primary { background: var(--am-grad); color: #fff; box-shadow: var(--am-glow); }
.am-btn--primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.am-btn--soft { background: var(--am-grad-soft); color: var(--am-ink); }
.am-btn--soft:hover { transform: translateY(-2px); box-shadow: var(--am-haze); }
.am-btn--ghost { background: var(--am-white); color: var(--am-ink); border: 1px solid var(--am-hairline); }
.am-btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--am-haze); }
.am-btn--sm { min-height: 40px; padding: 0 20px; font-size: 13px; }
.am-btn--block { width: 100%; }

.am-cta-row { display: grid; gap: 12px; }

.am-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--am-hairline);
  border-radius: 50%;
  background: var(--am-white);
  color: var(--am-ink);
  font-size: 15px;
  cursor: pointer;
  flex: none;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.am-iconbtn:hover { transform: translateY(-2px); box-shadow: var(--am-haze); }
.am-iconbtn--chip { background: var(--am-chip); border-color: transparent; color: var(--am-violet); }

.am-send {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--am-grad);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  flex: none;
  box-shadow: var(--am-glow);
  transition: transform 0.18s ease-out;
}
.am-send:hover { transform: scale(1.06); }

/* ---------- onboarding ---------- */

.am-onboard { display: flex; flex-direction: column; flex: 1; gap: 14px; padding: 4px 20px 20px; }
.am-onboard__top { display: flex; align-items: center; justify-content: space-between; }
.am-onboard__skip { font-size: 11.5px; color: var(--am-dim); background: none; border: 0; cursor: pointer; font-family: var(--am-font); }
.am-onboard__art { display: grid; place-items: center; flex: 1; min-height: 260px; }

.am-pagi {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: conic-gradient(var(--am-violet) calc(var(--am-progress, 33) * 1%), rgba(46, 47, 74, 0.10) 0);
  font-size: 9px;
  font-weight: 700;
  color: var(--am-ink);
}
.am-pagi::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--am-white); }
.am-pagi > span { position: relative; }

/* ---------- greeting header ---------- */

.am-greet { display: flex; align-items: center; gap: 10px; }
.am-greet__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--am-grad-soft); flex: none; overflow: hidden; }
.am-greet__avatar img { width: 100%; height: 100%; object-fit: cover; }
.am-greet__hi { margin: 0; font-size: 11px; color: var(--am-dim); }
.am-greet__name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--am-ink); }
.am-greet__end { margin-left: auto; }

/* ---------- input pill ---------- */

.am-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 8px 6px 18px;
  border: 1px solid var(--am-hairline);
  border-radius: 999px;
  background: var(--am-white);
  box-shadow: var(--am-haze);
}
.am-input__field {
  flex: 1;
  border: 0;
  outline: none;
  background: none;
  font-family: var(--am-font);
  font-size: 13px;
  color: var(--am-ink);
  min-width: 0;
}
.am-input__field::placeholder { color: var(--am-dim); }
.am-input__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--am-dim); font-size: 14px; flex: none; }

/* ---------- suggestion chips ---------- */

.am-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.am-chips::-webkit-scrollbar { display: none; }
.am-chipitem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 34px;
  border: 1px solid var(--am-hairline);
  border-radius: 999px;
  background: var(--am-white);
  font-size: 12px;
  font-weight: 500;
  color: var(--am-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.am-chipitem:hover { transform: translateY(-2px); box-shadow: var(--am-haze); }
.am-chipitem i { color: var(--am-violet); font-style: normal; font-size: 12px; }

/* ---------- action cards ---------- */

.am-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.am-action {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--am-hairline);
  border-radius: 20px;
  background: var(--am-white);
  box-shadow: var(--am-haze);
  text-decoration: none;
}
.am-action__chip {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--am-chip);
  color: var(--am-violet);
  font-size: 14px;
}
.am-action__title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--am-ink); }
.am-action__sub { margin: 0; font-size: 11px; line-height: 1.45; color: var(--am-dim); }
.am-action__arrow { position: absolute; top: 12px; right: 12px; font-size: 12px; color: var(--am-dim); }

/* ---------- recent list ---------- */

.am-listhead { display: flex; align-items: baseline; justify-content: space-between; }
.am-listhead__title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--am-ink); }
.am-listhead__more { font-size: 11px; color: var(--am-violet); text-decoration: none; font-weight: 600; }
.am-list { display: grid; gap: 10px; }
.am-listrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--am-hairline);
  border-radius: 18px;
  background: var(--am-white);
  text-decoration: none;
}
.am-listrow__chip {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--am-chip);
  color: var(--am-violet);
  font-size: 13px;
  flex: none;
}
.am-listrow__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--am-ink); }
.am-listrow__sub { margin: 0; font-size: 10.5px; color: var(--am-dim); }
.am-listrow__chev { margin-left: auto; color: var(--am-dim); font-size: 13px; }

/* ---------- chat kit ---------- */

.am-chathead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}
.am-chathead__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--am-ink); }
.am-chathead__logo {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 10px;
  background: var(--am-grad);
  color: #fff;
  font-size: 12px;
}

.am-chat { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.am-bubble {
  max-width: 82%;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--am-ink);
}
.am-bubble--user {
  align-self: flex-end;
  background: var(--am-bubble-user);
  border-radius: 20px 20px 6px 20px;
}
.am-bubble--ai {
  align-self: flex-start;
  background: var(--am-white);
  border: 1px solid var(--am-hairline);
  border-radius: 20px 20px 20px 6px;
}
.am-bubble__row { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 88%; }
.am-bubble__avatar {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--am-grad);
  color: #fff;
  font-size: 10px;
  flex: none;
}
.am-bubble__row .am-bubble--ai { max-width: 100%; }
.am-bubble__meta { font-size: 9.5px; color: var(--am-dim); align-self: flex-end; }
.am-bubble__row + .am-bubble__meta { align-self: flex-start; margin-left: 34px; }

.am-bubble--code {
  align-self: stretch;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--am-code);
  border: 1px solid var(--am-hairline);
  border-radius: 16px;
}
.am-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--am-hairline);
  font-size: 10px;
  color: var(--am-dim);
}
.am-code__copy {
  padding: 4px 10px;
  border: 1px solid var(--am-hairline);
  border-radius: 999px;
  background: var(--am-white);
  font-size: 10px;
  font-weight: 600;
  color: var(--am-ink);
  cursor: pointer;
}
.am-code__body {
  margin: 0;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--am-dim);
  white-space: pre-wrap;
}
.am-code__body .k { color: var(--am-violet); }
.am-code__body .s { color: #5B8DEF; }

.am-bubble--media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; background: none; border: 0; max-width: 88%; }
.am-bubble--media > div { aspect-ratio: 1; border-radius: 16px; background: linear-gradient(150deg, #C9B8F5, #9EC4F5); overflow: hidden; }
.am-bubble--media img { width: 100%; height: 100%; object-fit: cover; }

.am-actions-row { display: flex; gap: 6px; margin-left: 34px; }
.am-mini {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--am-hairline);
  border-radius: 50%;
  background: var(--am-white);
  color: var(--am-dim);
  font-size: 11px;
  cursor: pointer;
}

/* typing dots */
.am-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.am-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--am-violet-2);
  animation: am-dot 1.2s ease-in-out infinite;
}
.am-typing i:nth-child(2) { animation-delay: 0.15s; }
.am-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes am-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* chat demo pop-in */
.am-chat [data-am-pop] { opacity: 0; transform: scale(0.92) translateY(8px); transform-origin: bottom left; }
.am-chat [data-am-pop].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--am-ease-pop), transform 0.3s var(--am-ease-pop);
}
.am-chat [data-am-pop].am-bubble--user { transform-origin: bottom right; }

/* ---------- tab bar ---------- */

.am-tabbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 4px 16px 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--am-white);
  box-shadow: var(--am-haze-bar);
  z-index: 5;
}
.am-tabbar__item {
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 9.5px;
  color: var(--am-dim);
  text-decoration: none;
}
.am-tabbar__item i { font-size: 15px; font-style: normal; }
.am-tabbar__item--active { color: var(--am-violet); font-weight: 600; }
.am-tabbar__fab {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-top: -26px;
  border: 0;
  border-radius: 50%;
  background: var(--am-grad);
  color: #fff;
  font-size: 19px;
  cursor: pointer;
  box-shadow: var(--am-glow), 0 0 0 5px rgba(255, 255, 255, 0.9);
  transition: transform 0.18s ease-out;
}
.am-tabbar__fab:hover { transform: scale(1.06); }

/* ---------- voice kit ---------- */

.am-voice { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; flex: 1; justify-content: center; }
.am-voice__caption { font-size: 13px; color: var(--am-violet); }
.am-voice__controls { display: flex; align-items: center; gap: 22px; }

.am-wave {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--am-grad);
  cursor: pointer;
  box-shadow: var(--am-glow);
}
.am-wave::before,
.am-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(129, 73, 245, 0.45);
  animation: am-pulse 2s ease-out infinite;
}
.am-wave::after { animation-delay: 1s; }
@keyframes am-pulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}
.am-waveform { display: inline-flex; align-items: center; gap: 2.5px; height: 18px; }
.am-waveform i { width: 3px; border-radius: 2px; background: #fff; height: 30%; animation: am-waveform 1s ease-in-out infinite; }
.am-waveform i:nth-child(2) { animation-delay: 0.12s; }
.am-waveform i:nth-child(3) { animation-delay: 0.24s; }
.am-waveform i:nth-child(4) { animation-delay: 0.36s; }
.am-waveform i:nth-child(5) { animation-delay: 0.48s; }
@keyframes am-waveform {
  0%, 100% { height: 26%; }
  50% { height: 92%; }
}

/* ---------- reveals ---------- */

[data-am-reveal] { opacity: 0; transform: translateY(24px); }
[data-am-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--am-ease), transform 0.55s var(--am-ease);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .am-canvas::before, .am-canvas::after { animation: none; }
  .am-orb { animation: none; }
  .am-typing i { animation: none; opacity: 1; }
  .am-wave::before, .am-wave::after { animation: none; opacity: 0; }
  .am-waveform i { animation: none; height: 60%; }
  .am-chat [data-am-pop] { opacity: 1; transform: none; }
  [data-am-reveal] { opacity: 1; transform: none; }
  .am-btn:hover, .am-iconbtn:hover, .am-chipitem:hover { transform: none; box-shadow: none; }
  .am-send:hover, .am-tabbar__fab:hover { transform: none; }
}