* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 90, 0, .055),
      transparent 34%
    ),
    #050505;

  color: #fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Helvetica Neue",
    Arial,
    sans-serif;
}


/* =========================================================
   FRIDAY STATUS
   ========================================================= */

.friday-status {
  position: fixed;

  top: 28px;
  left: 28px;

  z-index: 20;

  color:
    rgba(225, 228, 230, .78);
}


.friday-top {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 5px;
}


.friday-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #ff7620;

  box-shadow:
    0 0 8px
    rgba(255, 101, 0, .8),

    0 0 15px
    rgba(255, 101, 0, .3);

  animation:
    fridayPulse 3s ease-in-out infinite;
}


.friday-name {
  font-size: 11px;

  letter-spacing: .12em;

  text-transform: uppercase;

  color:
    rgba(225, 228, 230, .7);
}


.friday-status-text {
  margin-left: 14px;

  font-size: 10px;

  letter-spacing: .04em;

  color:
    rgba(225, 228, 230, .42);
}


/* =========================================================
   STAGE
   ========================================================= */

.stage {
  position: relative;

  width: min(76vw, 560px);
  aspect-ratio: 1 / 1;

  margin: auto;

  top: 50%;

  transform:
    translateY(-50%);

  transition:
    transform .25s ease-out;

  isolation: isolate;
}


/* =========================================================
   AMBIENT ENERGY
   ========================================================= */

.ambient,
.ambient2,
.ambient3 {
  position: absolute;

  inset: 4%;

  border-radius: 50%;

  pointer-events: none;

  mix-blend-mode: screen;
}


.ambient {
  background:
    radial-gradient(
      circle,
      rgba(255, 80, 0, .14),
      rgba(255, 80, 0, .035) 34%,
      transparent 68%
    );

  filter: blur(28px);

  animation:
    ambientPulse 11s ease-in-out infinite;
}


.ambient2 {
  inset: 9%;

  background:
    radial-gradient(
      circle,
      rgba(255, 125, 30, .09),
      transparent 64%
    );

  filter: blur(42px);

  animation:
    ambientPulse2 15s ease-in-out infinite;
}


.ambient3 {
  inset: 16%;

  background:
    radial-gradient(
      circle,
      rgba(225, 228, 230, .055),
      transparent 63%
    );

  filter: blur(32px);

  animation:
    ambientPulse3 17s ease-in-out infinite;
}


/* =========================================================
   ORB
   ========================================================= */

.orb {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  filter:
    drop-shadow(
      0 0 18px rgba(255, 75, 0, .12)
    );
}


/* =========================================================
   MAIN ENERGY
   ========================================================= */

.energy-field {
  transform-origin: 300px 300px;

  animation:
    mainBreath 9s ease-in-out infinite;
}


.energy-field-secondary {
  transform-origin: 300px 300px;

  animation:
    secondaryBreath 12s ease-in-out infinite;
}


.energy-field-tertiary {
  transform-origin: 300px 300px;

  animation:
    tertiaryBreath 15s ease-in-out infinite;
}


.energy-field-fourth {
  transform-origin: 300px 300px;

  animation:
    fourthMotion 18s ease-in-out infinite;
}


.energy-field-fifth {
  transform-origin: 300px 300px;

  animation:
    fifthMotion 21s ease-in-out infinite;
}


/* =========================================================
   ORGANIC RIBBONS
   ========================================================= */

.organic {
  transform-origin: 300px 300px;

  animation:
    organicDrift 13s ease-in-out infinite;
}


.organic2 {
  transform-origin: 300px 300px;

  animation:
    organicDrift2 17s ease-in-out infinite;
}


.organic3 {
  transform-origin: 300px 300px;

  animation:
    organicDrift3 27s ease-in-out infinite;
}


/* =========================================================
   MOVING LIGHT
   ========================================================= */

.light {
  stroke-linecap: round;

  stroke-dasharray:
    55 850;

  animation:
    lightTravel 7s linear infinite;
}


.light2 {
  stroke-dasharray:
    38 870;

  animation:
    lightTravel2 11s linear infinite;
}


.light3 {
  stroke-dasharray:
    70 830;

  animation:
    lightTravel3 16s linear infinite;
}


.light4 {
  stroke-dasharray:
    45 855;

  animation:
    lightTravel4 19s linear infinite;
}


.light5 {
  stroke-dasharray:
    32 868;

  animation:
    lightTravel5 23s linear infinite;
}


/* =========================================================
   GRADIENT / MICRO ENERGY
   ========================================================= */

.gradient-energy {
  animation:
    gradientMotion 11s ease-in-out infinite;
}


.gradient-energy2 {
  animation:
    gradientMotion2 14s ease-in-out infinite;
}


.micro-inner {
  transform-origin: 300px 300px;

  animation:
    microInner 13s ease-in-out infinite;
}


.micro-outer {
  transform-origin: 300px 300px;

  animation:
    microOuter 16s ease-in-out infinite;
}


/* =========================================================
   PARTICLES
   ========================================================= */

.particle {
  transform-box: fill-box;
  transform-origin: center;

  animation:
    particleFloat 8s ease-in-out infinite;
}


.particle:nth-child(2) {
  animation-delay: -1.5s;
}


.particle:nth-child(3) {
  animation-delay: -3.2s;
}


.particle:nth-child(4) {
  animation-delay: -5.1s;
}


.particle:nth-child(5) {
  animation-delay: -2.4s;
}


.particle:nth-child(6) {
  animation-delay: -6.2s;
}


/* =========================================================
   INNER RIPPLE
   ========================================================= */

.inner-ripple {
  transform-origin: 300px 300px;

  animation:
    ripple 10s ease-in-out infinite;
}


/* =========================================================
   CORE
   ========================================================= */

.core {
  fill:
    radial-gradient(
      circle,
      #080808,
      #020202
    );
}


/* =========================================================
   FRIDAY THOUGHT
   ========================================================= */

.thought {
  position: absolute;

  left: 50%;
  top: 50%;

  width: min(40%, 215px);

  padding: 11px 15px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  font-size:
    clamp(10px, 1.8vw, 13px);

  font-weight: 400;

  line-height: 1.42;

  letter-spacing: .025em;

  color:
    rgba(225, 228, 230, .76);

  background:
    radial-gradient(
      ellipse at center,
      rgba(5, 5, 5, .91),
      rgba(5, 5, 5, .80)
    );

  border:
    1px solid
    rgba(220, 223, 225, .16);

  border-radius: 14px;

  box-shadow:
    0 0 18px
    rgba(0, 0, 0, .55),

    0 0 28px
    rgba(255, 90, 0, .045),

    inset 0 0 18px
    rgba(255, 105, 0, .025);

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  opacity: 0;

  filter:
    blur(5px);

  transform:
    translate(-50%, -50%)
    scale(.94);

  pointer-events: none;

  z-index: 6;

  transition:
    opacity 1.15s ease,
    filter 1.15s ease,
    transform 1.5s cubic-bezier(
      .22,
      .61,
      .36,
      1
    );
}


.thought::before {
  content: "";

  position: absolute;

  inset: -1px;

  border-radius: inherit;

  padding: 1px;

  background:
    linear-gradient(
      115deg,
      rgba(255, 101, 0, .05),
      rgba(225, 228, 230, .24),
      rgba(255, 101, 0, .30),
      rgba(225, 228, 230, .08),
      rgba(255, 101, 0, .05)
    );

  opacity: .7;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  animation:
    thoughtBorder 9s ease-in-out infinite;

  pointer-events: none;
}


.thought::after {
  content: "";

  position: absolute;

  width: 3px;
  height: 3px;

  right: 9px;
  top: 8px;

  border-radius: 50%;

  background:
    #ff7620;

  box-shadow:
    0 0 8px
    rgba(255, 101, 0, .75),

    0 0 15px
    rgba(255, 101, 0, .25);

  opacity: .7;

  animation:
    thoughtDot 5s ease-in-out infinite;
}


.thought.visible {
  opacity: .94;

  filter:
    blur(0);

  transform:
    translate(-50%, -50%)
    scale(1);
}


/* =========================================================
   FRIDAY CONVERSATION
   ========================================================= */

.friday-conversation {
  position: absolute;

  left: 50%;
  bottom: 3.5%;

  width: min(54%, 300px);
  height: 42px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    32px;

  grid-template-rows:
    0
    32px;

  column-gap: 0;
  row-gap: 0;

  align-items: center;

  padding:
    4px 5px 4px 15px;

  transform:
    translateX(-50%);

  z-index: 10;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(14, 14, 14, .88),
      rgba(5, 5, 5, .94)
    );

  border:
    1px solid
    rgba(225, 228, 230, .14);

  border-radius: 22px;

  box-shadow:
    0 8px 28px
    rgba(0, 0, 0, .42),

    0 0 20px
    rgba(255, 90, 0, .045),

    inset 0 0 16px
    rgba(255, 105, 0, .02);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    width .55s cubic-bezier(
      .22,
      .61,
      .36,
      1
    ),
    height .55s cubic-bezier(
      .22,
      .61,
      .36,
      1
    ),
    padding .55s cubic-bezier(
      .22,
      .61,
      .36,
      1
    ),
    border-radius .45s ease,
    border-color .3s ease,
    box-shadow .4s ease;
}


.friday-conversation:focus-within,
.friday-conversation.open {
  width: min(72%, 410px);
  height: min(43.5vh, 255px);

  grid-template-rows:
    minmax(0, 1fr)
    32px;

  padding:
    14px 8px 7px 16px;

  border-radius: 20px;

  border-color:
    rgba(255, 118, 32, .25);

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, .62),

    0 0 34px
    rgba(255, 90, 0, .075),

    inset 0 0 24px
    rgba(255, 105, 0, .025);
}


/* =========================================================
   FRIDAY CONVERSATION MESSAGES
   ========================================================= */

.friday-conversation-messages {
  grid-column:
    1 / -1;

  grid-row: 1;

  min-width: 0;
  min-height: 0;

  width: 100%;
  height: 100%;

  overflow-x: hidden;
  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 17px;

  padding:
    5px 12px 18px 2px;

  opacity: 0;

  pointer-events: none;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(255, 118, 32, .18)
    transparent;

  transition:
    opacity .3s ease .05s;
}


.friday-conversation:focus-within
.friday-conversation-messages,
.friday-conversation.open
.friday-conversation-messages {
  opacity: 1;

  pointer-events: auto;
}


.friday-conversation-messages::-webkit-scrollbar {
  width: 4px;
}


.friday-conversation-messages::-webkit-scrollbar-track {
  background: transparent;
}


.friday-conversation-messages::-webkit-scrollbar-thumb {
  background:
    rgba(255, 118, 32, .16);

  border-radius: 999px;
}


.friday-conversation-messages::-webkit-scrollbar-thumb:hover {
  background:
    rgba(255, 118, 32, .28);
}


/* =========================================================
   CONVERSATION MESSAGE
   ========================================================= */

.friday-message {
  width: 88%;

  flex: 0 0 auto;

  font-size: 12px;

  font-weight: 400;

  line-height: 1.55;

  letter-spacing: .012em;

  white-space: pre-wrap;

  word-break: break-word;
}


.friday-message-friday {
  align-self: flex-start;

  text-align: left;

  color:
    rgba(255, 137, 68, .92);

  text-shadow:
    0 0 14px
    rgba(255, 90, 0, .09);
}


.friday-message-user {
  align-self: flex-end;

  text-align: right;

  color:
    rgba(155, 211, 255, .88);

  text-shadow:
    0 0 14px
    rgba(94, 181, 255, .055);
}


/* =========================================================
   CONVERSATION INPUT
   ========================================================= */

.friday-conversation-input {
  grid-column: 1;
  grid-row: 2;

  min-width: 0;

  width: 100%;
  height: 32px;

  margin: 0;
  padding: 0 10px 0 0;

  border: 0;
  outline: 0;

  appearance: none;
  -webkit-appearance: none;

  background: transparent;

  color:
    rgba(235, 237, 239, .88);

  font-family: inherit;

  font-size: 12px;

  font-weight: 400;

  letter-spacing: .015em;

  caret-color:
    #ff7620;
}


.friday-conversation-input::placeholder {
  color:
    rgba(225, 228, 230, .30);

  opacity: 1;
}


.friday-conversation:focus-within
.friday-conversation-input,
.friday-conversation.open
.friday-conversation-input {
  border-top:
    1px solid
    rgba(225, 228, 230, .055);
}


/* =========================================================
   CONVERSATION SEND
   ========================================================= */

.friday-conversation-send {
  grid-column: 2;
  grid-row: 2;

  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0 0 2px 0;

  border:
    1px solid
    rgba(255, 118, 32, .26);

  border-radius: 50%;

  outline: 0;

  appearance: none;
  -webkit-appearance: none;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 126, 45, .20),
      rgba(255, 90, 0, .07) 60%,
      rgba(255, 90, 0, .02)
    );

  color:
    rgba(255, 145, 78, .92);

  font-family: inherit;

  font-size: 16px;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 0 12px
    rgba(255, 90, 0, .07);

  transition:
    transform .2s ease,
    border-color .3s ease,
    color .3s ease,
    box-shadow .3s ease;
}


.friday-conversation-send:hover {
  border-color:
    rgba(255, 118, 32, .45);

  color:
    rgba(255, 165, 105, 1);

  box-shadow:
    0 0 16px
    rgba(255, 90, 0, .13);
}


.friday-conversation-send:active {
  transform:
    scale(.92);
}


/* =========================================================
   ORGANIC MOTION
   ========================================================= */

@keyframes organicDrift {

  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);
  }

  25% {
    transform:
      rotate(3deg)
      scale(1.025);
  }

  50% {
    transform:
      rotate(-2deg)
      scale(.975);
  }

  75% {
    transform:
      rotate(2deg)
      scale(1.02);
  }
}


@keyframes organicDrift2 {

  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);
  }

  33% {
    transform:
      rotate(-4deg)
      scale(.97);
  }

  66% {
    transform:
      rotate(3deg)
      scale(1.035);
  }
}


@keyframes organicDrift3 {

  0% {
    transform:
      rotate(0deg)
      scale(1);
  }

  25% {
    transform:
      rotate(-2deg)
      scale(1.025);
  }

  50% {
    transform:
      rotate(4deg)
      scale(.965);
  }

  75% {
    transform:
      rotate(-3deg)
      scale(1.015);
  }

  100% {
    transform:
      rotate(0deg)
      scale(1);
  }
}


/* =========================================================
   LIGHT TRAVEL
   ========================================================= */

@keyframes lightTravel {

  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -905;
  }
}


@keyframes lightTravel2 {

  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 908;
  }
}


@keyframes lightTravel3 {

  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -900;
  }
}


@keyframes lightTravel4 {

  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 905;
  }
}


@keyframes lightTravel5 {

  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -910;
  }
}


/* =========================================================
   GRADIENT MOTION
   ========================================================= */

@keyframes gradientMotion {

  0%,
  100% {
    opacity: .42;
  }

  50% {
    opacity: .82;
  }
}


@keyframes gradientMotion2 {

  0%,
  100% {
    opacity: .3;
  }

  50% {
    opacity: .65;
  }
}


/* =========================================================
   MICRO ENERGY
   ========================================================= */

@keyframes microInner {

  0%,
  100% {
    transform:
      scale(1)
      rotate(0deg);

    opacity: .32;
  }

  50% {
    transform:
      scale(1.055)
      rotate(-3deg);

    opacity: .65;
  }
}


@keyframes microOuter {

  0%,
  100% {
    transform:
      scale(1)
      rotate(0deg);

    opacity: .22;
  }

  50% {
    transform:
      scale(1.035)
      rotate(4deg);

    opacity: .5;
  }
}


/* =========================================================
   PARTICLES
   ========================================================= */

@keyframes particleFloat {

  0%,
  100% {
    transform:
      translate(0, 0)
      scale(.8);

    opacity: .25;
  }

  50% {
    transform:
      translate(0, -7px)
      scale(1.25);

    opacity: .9;
  }
}


/* =========================================================
   RIPPLE
   ========================================================= */

@keyframes ripple {

  0%,
  100% {
    transform:
      scale(.98);

    opacity: .22;
  }

  50% {
    transform:
      scale(1.035);

    opacity: .5;
  }
}


/* =========================================================
   AMBIENT
   ========================================================= */

@keyframes ambientPulse {

  0%,
  100% {
    transform:
      scale(.94);

    opacity: .45;
  }

  50% {
    transform:
      scale(1.06);

    opacity: .8;
  }
}


@keyframes ambientPulse2 {

  0%,
  100% {
    transform:
      scale(1);

    opacity: .3;
  }

  50% {
    transform:
      scale(1.08);

    opacity: .65;
  }
}


@keyframes ambientPulse3 {

  0%,
  100% {
    transform:
      scale(.97);

    opacity: .25;
  }

  50% {
    transform:
      scale(1.04);

    opacity: .55;
  }
}


/* =========================================================
   THOUGHT
   ========================================================= */

@keyframes thoughtBorder {

  0%,
  100% {
    opacity: .3;
    transform: rotate(0deg);
  }

  28% {
    opacity: .6;
  }

  52% {
    opacity: .88;
    transform: rotate(1deg);
  }

  76% {
    opacity: .45;
  }
}


@keyframes thoughtDot {

  0%,
  100% {
    opacity: .25;

    transform:
      scale(.7);
  }

  50% {
    opacity: .9;

    transform:
      scale(1.25);
  }
}


/* =========================================================
   FRIDAY PULSE
   ========================================================= */

@keyframes fridayPulse {

  0%,
  100% {
    opacity: .35;

    transform:
      scale(.8);
  }

  50% {
    opacity: .95;

    transform:
      scale(1.25);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .stage {
    width: 110vw;
    max-width: none;

    margin-left:
      calc((100vw - 110vw) / 2);

    margin-right: 0;
  }

  body.friday-input-active .stage {
    width: 88vw;

    margin-left:
      calc((100vw - 88vw) / 2);

    top:
      var(
        --friday-visual-center,
        50%
      );
  }

  .thought {
    width: 40%;

    padding:
      9px 11px;

    font-size: 10px;

    border-radius: 12px;
  }

  .friday-conversation {
    bottom: 3.5%;

    width: 58%;
    max-width: 290px;

    height: 40px;

    grid-template-columns:
      minmax(0, 1fr)
      30px;

    grid-template-rows:
      0
      30px;

    padding:
      4px 5px 4px 14px;
  }

  .friday-conversation:focus-within,
  .friday-conversation.open {
    width: min(82vw, 360px);
    max-width: none;

    height:
      min(
        52vh,
        320px
      );

    grid-template-rows:
      minmax(0, 1fr)
      30px;

    padding:
      13px 7px 6px 14px;

    border-radius: 18px;
  }

  .friday-conversation-messages {
    gap: 15px;

    padding:
      4px 10px 16px 1px;
  }

  .friday-message {
    width: 91%;

    font-size: 12px;

    line-height: 1.5;
  }

  .friday-conversation-input {
    height: 30px;

    font-size: 16px;
  }

  .friday-conversation-send {
    width: 30px;
    height: 30px;

    font-size: 15px;
  }

  .friday-status {
    top: 16px;
    left: 16px;
  }

}

/* =========================================================
   ASK FRIDAY — EXPANDED ORANGE GLOW v1.0
   Same permanent glow language as Full Chat.
   Only active while Ask Friday is expanded/focused.
   ========================================================= */

.friday-conversation:focus-within,
.friday-conversation.open {
  border:
    1px solid
    rgba(255, 111, 30, .92);

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, .62),

    0 0 8px
    rgba(255, 111, 30, .34),

    0 0 18px
    rgba(255, 91, 15, .18),

    inset 0 0 24px
    rgba(255, 105, 0, .025);
}