/* =========================================================
   NOUS PERSONAL COMPANION
   personal-nous.css
========================================================= */


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


:root {
  --nous-bg: #030508;
  --nous-text: #ffffff;

  --nous-soft:
    rgba(255, 255, 255, 0.68);

  --nous-muted:
    rgba(255, 255, 255, 0.42);

  --nous-faint:
    rgba(255, 255, 255, 0.24);

  --nous-border:
    rgba(255, 255, 255, 0.08);

  --nous-blue:
    #76a9ff;

  --nous-cyan:
    #72dcff;

  --nous-purple:
    #a38aff;
}


html {
  min-height: 100%;

  background:
    var(--nous-bg);

  color-scheme:
    dark;
}


body {
  min-height: 100vh;

  margin: 0;

  overflow: hidden;

  color:
    var(--nous-text);

  background:
    var(--nous-bg);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}


button,
textarea {
  font: inherit;
}


button {
  color: inherit;
}


a {
  color: inherit;

  text-decoration:
    none;
}


button:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline:
    1px solid
    rgba(118, 169, 255, 0.8);

  outline-offset:
    4px;
}


/* =========================================================
   BACKGROUND
========================================================= */

.nous-chat-background {
  position: fixed;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #030508,
      #020307
    );
}


.nous-chat-glow {
  position: absolute;

  top: -38%;
  left: 50%;

  width: 960px;
  height: 960px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(71, 112, 198, 0.14),
      transparent 66%
    );

  filter:
    blur(30px);
}


.nous-chat-glow-secondary {
  position: absolute;

  right: -280px;
  bottom: -300px;

  width: 760px;
  height: 760px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(163, 138, 255, 0.08),
      transparent 70%
    );

  filter:
    blur(40px);
}


.nous-chat-stars {
  position: absolute;

  inset: 0;

  opacity:
    0.42;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.58) 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle,
      rgba(118, 169, 255, 0.48) 1px,
      transparent 1.4px
    );

  background-size:
    150px 150px,
    230px 230px;

  background-position:
    0 0,
    80px 90px;
}


/* =========================================================
   SHELL
========================================================= */

.nous-chat-shell {
  position: relative;

  z-index: 1;

  height: 100vh;

  display: grid;

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


/* =========================================================
   HEADER
========================================================= */

.nous-chat-header {
  position: relative;

  z-index: 50;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  padding:
    0 30px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);

  background:
    rgba(3, 5, 8, 0.72);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


/* =========================================================
   BRAND
========================================================= */

.nous-chat-brand {
  justify-self:
    start;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #ffffff;

  font-size:
    0.9rem;

  font-weight:
    750;

  letter-spacing:
    0.2em;
}


.nous-chat-brand img {
  width:
    32px;

  height:
    32px;

  display:
    block;

  object-fit:
    contain;

  animation:
    nousLogoSpin
    15s
    linear
    infinite;
}


/* =========================================================
   HEADER CONTEXT
========================================================= */

.nous-chat-context {
  display:
    grid;

  gap:
    3px;

  text-align:
    center;
}


.nous-chat-context small {
  color:
    rgba(255, 255, 255, 0.34);

  font-size:
    0.62rem;

  letter-spacing:
    0.15em;
}


.nous-chat-context strong {
  font-size:
    0.78rem;

  font-weight:
    550;
}


/* =========================================================
   PERSONAL BUTTON
========================================================= */

.nous-chat-back {
  justify-self:
    end;

  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    999px;

  color:
    rgba(255, 255, 255, 0.65);

  font-size:
    0.77rem;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}


.nous-chat-back:hover {
  color:
    #ffffff;

  border-color:
    rgba(118, 169, 255, 0.3);

  background:
    rgba(118, 169, 255, 0.04);

  transform:
    translateX(2px);
}


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

.nous-chat-main {
  min-height:
    0;

  display:
    grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto;
}


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

.nous-chat-conversation {
  position:
    relative;

  min-height:
    0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  padding:
    92px
    max(
      24px,
      calc(
        (100vw - 850px) / 2
      )
    )
    50px;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(118, 169, 255, 0.25)
    transparent;
}


.nous-chat-conversation::-webkit-scrollbar {
  width:
    7px;
}


.nous-chat-conversation::-webkit-scrollbar-track {
  background:
    transparent;
}


.nous-chat-conversation::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(118, 169, 255, 0.2);
}


/* =========================================================
   NOUS IMAGE NUDGE
========================================================= */

.nous-image-nudge-wrap {
  position:
    absolute;

  top:
    0;

  left:
    50%;

  z-index:
    30;

  width:
    150px;

  height:
    110px;

  transform:
    translateX(-50%);

  display:
    flex;

  justify-content:
    center;

  pointer-events:
    none;
}


.nous-image-nudge {
  position:
    relative;

  width:
    150px;

  height:
    108px;

  display:
    block;

  pointer-events:
    auto;

  cursor:
    pointer;

  text-decoration:
    none;
}


/* =========================================================
   IMAGE NUDGE BOWL
========================================================= */

.nous-image-nudge-bowl {
  position:
    absolute;

  top:
    -1px;

  left:
    50%;

  width:
    118px;

  height:
    52px;

  transform:
    translateX(-50%);

  border-left:
    1.5px solid
    rgba(100, 160, 255, 0.33);

  border-right:
    1.5px solid
    rgba(114, 220, 255, 0.33);

  border-bottom:
    1.5px solid
    rgba(114, 220, 255, 0.54);

  border-top:
    0;

  border-radius:
    0 0
    64px 64px;

  background:
    linear-gradient(
      180deg,
      rgba(80, 140, 255, 0),
      rgba(80, 140, 255, 0.024)
    );

  box-shadow:
    0 8px 24px
    rgba(70, 130, 255, 0.04);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}


/* =========================================================
   CAMERA ARTWORK
========================================================= */

.nous-image-nudge-icon {
  position:
    absolute;

  top:
    20px;

  left:
    50%;

  z-index:
    5;

  width:
    78px;

  height:
    78px;

  transform:
    translateX(-50%);

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    transparent;

  box-shadow:
    none;

  transition:
    transform 200ms ease,
    filter 200ms ease;
}


.nous-image-nudge-icon img {
  width:
    76px;

  height:
    76px;

  display:
    block;

  object-fit:
    contain;

  background:
    transparent;

  opacity:
    1;

  filter:
    drop-shadow(
      0 0 13px
      rgba(73, 150, 255, 0.22)
    );

  pointer-events:
    none;
}


/* =========================================================
   CAMERA HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .nous-image-nudge:hover
  .nous-image-nudge-bowl {
    border-left-color:
      rgba(100, 170, 255, 0.52);

    border-right-color:
      rgba(114, 220, 255, 0.52);

    border-bottom-color:
      rgba(114, 220, 255, 0.8);

    box-shadow:
      0 10px 28px
      rgba(70, 140, 255, 0.08);
  }


  .nous-image-nudge:hover
  .nous-image-nudge-icon {
    transform:
      translateX(-50%)
      translateY(2px)
      scale(1.08);

    filter:
      brightness(1.08);
  }

}


/* =========================================================
   REMOVE OPTIONAL NUDGE EXTRAS
========================================================= */

.nous-image-nudge-dot,
.nous-image-nudge-label {
  display:
    none;
}


/* =========================================================
   WELCOME
========================================================= */

.nous-chat-welcome {
  max-width:
    700px;

  margin:
    5vh auto
    80px;

  text-align:
    center;

  transition:
    opacity 240ms ease,
    transform 240ms ease;
}


.nous-chat-welcome.is-hidden {
  display:
    none;
}


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

.nous-chat-orb {
  position:
    relative;

  width:
    82px;

  height:
    82px;

  display:
    grid;

  place-items:
    center;

  margin:
    0 auto
    34px;

  border:
    1px solid
    rgba(118, 169, 255, 0.2);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(118, 169, 255, 0.07),
      transparent 68%
    );

  box-shadow:
    inset
    0 0 32px
    rgba(118, 169, 255, 0.06),
    0 0 40px
    rgba(118, 169, 255, 0.03);
}


.nous-chat-orb img {
  position:
    relative;

  z-index:
    3;

  width:
    42px;

  height:
    42px;

  display:
    block;

  object-fit:
    contain;

  animation:
    nousLogoSpin
    14s
    linear
    infinite;
}


.nous-chat-orbit {
  position:
    absolute;

  border:
    1px solid
    rgba(118, 169, 255, 0.28);

  border-radius:
    50%;
}


.nous-chat-orbit.orbit-one {
  inset:
    9px;

  transform:
    rotateX(67deg)
    rotateZ(-18deg);

  animation:
    nousOrbitOne
    9s
    linear
    infinite;
}


.nous-chat-orbit.orbit-two {
  inset:
    17px 5px;

  border-color:
    rgba(114, 220, 255, 0.18);

  transform:
    rotateY(67deg)
    rotateZ(23deg);

  animation:
    nousOrbitTwo
    12s
    linear
    infinite;
}


/* =========================================================
   WELCOME COPY
========================================================= */

.nous-chat-eyebrow {
  margin:
    0;

  color:
    rgba(118, 169, 255, 0.78);

  font-size:
    0.65rem;

  font-weight:
    700;

  letter-spacing:
    0.2em;
}


.nous-chat-welcome h1 {
  margin:
    16px 0
    20px;

  color:
    #ffffff;

  font-size:
    clamp(
      3rem,
      7vw,
      6rem
    );

  line-height:
    0.95;

  font-weight:
    480;

  letter-spacing:
    -0.065em;
}


.nous-chat-welcome-copy {
  max-width:
    560px;

  margin:
    0 auto;

  color:
    rgba(255, 255, 255, 0.42);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   MESSAGE LIST
========================================================= */

.nous-message-list {
  width:
    100%;

  display:
    grid;

  gap:
    26px;
}


.nous-message {
  max-width:
    720px;

  color:
    rgba(255, 255, 255, 0.86);

  font-size:
    0.95rem;

  line-height:
    1.7;
}


.nous-message p {
  margin:
    0 0 12px;
}


.nous-message p:last-child {
  margin-bottom:
    0;
}


.nous-message-user {
  justify-self:
    end;

  max-width:
    620px;

  padding:
    15px 19px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius:
    22px
    22px
    6px
    22px;

  background:
    rgba(255, 255, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.92);
}


.nous-message-assistant {
  justify-self:
    start;

  padding:
    4px 0;
}


.nous-message-assistant::before {
  content:
    "NOUS";

  display:
    block;

  margin-bottom:
    8px;

  color:
    rgba(118, 169, 255, 0.7);

  font-size:
    0.62rem;

  font-weight:
    700;

  letter-spacing:
    0.17em;
}


/* =========================================================
   MARKDOWN
========================================================= */

.nous-message-assistant h1,
.nous-message-assistant h2,
.nous-message-assistant h3 {
  color:
    #ffffff;

  font-weight:
    600;
}


.nous-message-assistant code {
  padding:
    2px 5px;

  border-radius:
    5px;

  background:
    rgba(255, 255, 255, 0.07);
}


.nous-message-assistant pre {
  overflow-x:
    auto;

  padding:
    14px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    14px;

  background:
    rgba(0, 0, 0, 0.3);
}


/* =========================================================
   COMPOSER SHELL
========================================================= */

.nous-chat-composer-shell {
  padding:
    18px
    24px
    22px;

  background:
    linear-gradient(
      to top,
      rgba(3, 5, 8, 0.99),
      rgba(3, 5, 8, 0.88),
      rgba(3, 5, 8, 0.15)
    );
}


/* =========================================================
   COMPOSER
========================================================= */

.nous-chat-composer {
  width:
    min(
      780px,
      100%
    );

  min-height:
    64px;

  display:
    flex;

  align-items:
    flex-end;

  gap:
    8px;

  margin:
    0 auto;

  padding:
    10px
    10px
    10px
    18px;

  border:
    1px solid
    rgba(255, 255, 255, 0.1);

  border-radius:
    28px;

  background:
    rgba(255, 255, 255, 0.045);

  box-shadow:
    0 16px 50px
    rgba(0, 0, 0, 0.2);

  backdrop-filter:
    blur(20px);

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

  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}


.nous-chat-composer:focus-within {
  border-color:
    rgba(118, 169, 255, 0.26);

  background:
    rgba(255, 255, 255, 0.055);

  box-shadow:
    0 16px 50px
    rgba(0, 0, 0, 0.24),
    0 0 24px
    rgba(118, 169, 255, 0.035);
}


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

#nous-chat-input {
  flex:
    1;

  min-width:
    0;

  width:
    100%;

  min-height:
    42px;

  max-height:
    180px;

  resize:
    none;

  padding:
    10px 6px
    8px 0;

  border:
    0;

  outline:
    0;

  color:
    #ffffff;

  background:
    transparent;

  font-size:
    0.92rem;

  line-height:
    1.5;

  scrollbar-width:
    thin;
}


#nous-chat-input::placeholder {
  color:
    rgba(255, 255, 255, 0.32);
}


/* =========================================================
   COMPOSER BUTTONS
========================================================= */

.voice-button,
.send-button {
  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    transparent;

  cursor:
    pointer;

  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}


/* =========================================================
   VOICE
========================================================= */

.voice-button {
  position:
    relative;

  z-index:
    10;

  pointer-events:
    auto;
}


.voice-button img,
.send-button img {
  display:
    block;

  object-fit:
    contain;

  background:
    transparent;

  pointer-events:
    none;
}


.voice-button img {
  width:
    27px;

  height:
    27px;
}


.voice-button:hover {
  transform:
    scale(1.06);

  background:
    rgba(255, 255, 255, 0.075);
}


/* =========================================================
   VOICE LISTENING
========================================================= */

.voice-button.is-listening {
  background:
    rgba(86, 145, 255, 0.14);

  box-shadow:
    0 0 0 5px
    rgba(86, 145, 255, 0.045),
    0 0 26px
    rgba(86, 145, 255, 0.24);
}


.voice-button.is-listening img {
  animation:
    nousVoiceMemoPulse
    1.15s
    ease-in-out
    infinite;
}


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

.send-button img {
  width:
    29px;

  height:
    22px;
}


.send-button:hover {
  transform:
    scale(1.06);

  box-shadow:
    0 0 22px
    rgba(255, 255, 255, 0.12);
}


.send-button:disabled,
.voice-button:disabled {
  opacity:
    0.42;

  cursor:
    default;

  transform:
    none;
}


/* =========================================================
   CAPTION
========================================================= */

.nous-chat-caption-row {
  width:
    min(
      760px,
      100%
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  margin:
    9px auto
    0;
}


.nous-chat-caption {
  margin:
    0;

  text-align:
    center;

  color:
    rgba(255, 255, 255, 0.25);

  font-size:
    0.64rem;

  line-height:
    1.4;
}


.nous-chat-mode {
  flex:
    0 0 auto;

  color:
    rgba(118, 169, 255, 0.42);

  font-size:
    0.48rem;

  font-weight:
    750;

  letter-spacing:
    0.17em;
}


/* =========================================================
   VOICE STATUS
========================================================= */

#nous-voice-status.is-listening {
  color:
    rgba(114, 220, 255, 0.7);
}


#nous-voice-status.is-error {
  color:
    rgba(255, 139, 155, 0.72);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes nousLogoSpin {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes nousOrbitOne {

  from {
    transform:
      rotateX(67deg)
      rotateZ(-18deg);
  }

  to {
    transform:
      rotateX(67deg)
      rotateZ(342deg);
  }

}


@keyframes nousOrbitTwo {

  from {
    transform:
      rotateY(67deg)
      rotateZ(23deg);
  }

  to {
    transform:
      rotateY(67deg)
      rotateZ(-337deg);
  }

}


@keyframes nousVoiceMemoPulse {

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

    opacity:
      0.72;
  }

  50% {
    transform:
      scale(1.12);

    opacity:
      1;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .nous-chat-conversation {
    padding:
      90px
      28px
      42px;
  }


  .nous-chat-welcome {
    margin-top:
      4vh;
  }

}


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

@media (max-width: 700px) {

  body {
    overflow:
      hidden;
  }


  .nous-chat-shell {
    grid-template-rows:
      68px
      minmax(0, 1fr);
  }


  .nous-chat-header {
    grid-template-columns:
      auto
      1fr;

    padding:
      0 16px;
  }


  .nous-chat-context {
    display:
      none;
  }


  .nous-chat-back {
    justify-self:
      end;

    min-height:
      36px;

    padding:
      0 12px;

    font-size:
      0.69rem;
  }


  .nous-chat-brand span {
    display:
      none;
  }


  .nous-chat-brand img {
    width:
      30px;

    height:
      30px;
  }


  .nous-chat-conversation {
    padding:
      82px
      18px
      30px;
  }


  /* CAMERA NUDGE */

  .nous-image-nudge-wrap,
  .nous-image-nudge {
    width:
      120px;

    height:
      92px;
  }


  .nous-image-nudge-bowl {
    width:
      96px;

    height:
      45px;

    border-radius:
      0 0
      52px 52px;
  }


  .nous-image-nudge-icon {
    top:
      18px;

    width:
      64px;

    height:
      64px;
  }


  .nous-image-nudge-icon img {
    width:
      62px;

    height:
      62px;
  }


  .nous-chat-welcome {
    margin:
      4vh auto
      52px;
  }


  .nous-chat-welcome h1 {
    font-size:
      clamp(
        2.8rem,
        14vw,
        4rem
      );
  }


  .nous-chat-welcome-copy {
    font-size:
      0.78rem;
  }


  .nous-chat-composer-shell {
    padding:
      12px
      12px
      16px;
  }


  .nous-chat-composer {
    min-height:
      60px;

    padding:
      8px
      8px
      8px
      15px;

    border-radius:
      24px;
  }


  .voice-button,
  .send-button {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }


  .voice-button img {
    width:
      25px;

    height:
      25px;
  }


  .send-button img {
    width:
      27px;

    height:
      20px;
  }


  .nous-chat-caption-row {
    align-items:
      center;

    gap:
      7px;
  }


  .nous-chat-mode {
    display:
      none;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .nous-chat-composer {
    gap:
      5px;
  }


  .voice-button,
  .send-button {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;
  }


  .nous-chat-welcome h1 {
    font-size:
      2.7rem;
  }


  .nous-image-nudge-icon {
    width:
      58px;

    height:
      58px;
  }


  .nous-image-nudge-icon img {
    width:
      56px;

    height:
      56px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}

/* =========================================================
   PROFILE INTERACTION FIX
========================================================= */

.personal-nav {
  position: relative;
  z-index: 1000;
}

.personal-nav-actions {
  position: relative;
  z-index: 1001;
}

.personal-profile-button {
  position: relative;
  z-index: 1002;

  pointer-events: auto !important;

  cursor: pointer;
}

.personal-profile-button img {
  pointer-events: none;
}

.personal-profile-menu {
  position: fixed;

  z-index: 2000;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;
}

.personal-profile-menu.is-open {
  pointer-events: auto;

  opacity: 1;
  visibility: visible;
}