:root {
  --cream: #fff8f1;

  --ink: #3f342d;
  --muted: #a99a8d;
  --soft: #c9baad;

  --orange: #ff9b62;
  --yellow: #ffd76f;
  --pink: #f5a5bb;
  --peach: #ffd0b4;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;

  color: var(--ink);
  background: var(--cream);

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

  -webkit-font-smoothing: antialiased;
}

button,
textarea,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.hidden {
  display: none !important;
}


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

.ambient {
  position: fixed;
  inset: 0;

  pointer-events: none;
  overflow: hidden;

  z-index: 0;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,255,255,.38),
      transparent 42%
    );
}

.light {
  position: absolute;

  border-radius: 50%;

  filter: blur(90px);

  mix-blend-mode: multiply;

  will-change: transform;
}

.light.orange {
  width: 65vw;
  height: 65vw;

  left: -18vw;
  top: -22vw;

  background: rgba(255,175,105,.48);

  animation:
    orangeDrift 26s var(--ease) infinite;
}

.light.pink {
  width: 62vw;
  height: 62vw;

  right: -20vw;
  bottom: -25vw;

  background: rgba(245,165,187,.45);

  animation:
    pinkDrift 31s var(--ease) infinite;
}

.light.yellow {
  width: 45vw;
  height: 45vw;

  left: 34vw;
  top: 27vh;

  background: rgba(255,220,110,.28);

  animation:
    yellowDrift 39s var(--ease) infinite reverse;
}

@keyframes orangeDrift {

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

  50% {
    transform:
      translate3d(7vw,5vw,0)
      scale(1.08);
  }

}

@keyframes pinkDrift {

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

  50% {
    transform:
      translate3d(-6vw,-5vw,0)
      scale(1.1);
  }

}

@keyframes yellowDrift {

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

  50% {
    transform:
      translate3d(5vw,-4vw,0)
      scale(1.06);
  }

}


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

#login,
#select,
#chat {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100dvh;
}


/* =========================================================
   LOGIN
   ========================================================= */

#login {
  display: flex;

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

.login-orb {
  width: min(72vw, 520px);
  height: min(72vw, 520px);

  min-width: 310px;
  min-height: 310px;

  border-radius: 50%;

  position: relative;

  display: flex;

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255,235,178,.95),
      transparent 27%
    ),
    radial-gradient(
      circle at 72% 66%,
      rgba(248,166,188,.82),
      transparent 39%
    ),
    radial-gradient(
      circle at 43% 70%,
      rgba(255,169,104,.76),
      transparent 43%
    );

  box-shadow:
    0 0 100px rgba(255,174,116,.17),
    0 0 180px rgba(245,165,187,.13);

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

@keyframes orbBreath {

  0%,
  100% {
    transform: scale(1);
    filter: saturate(.94);
  }

  50% {
    transform: scale(1.025);
    filter: saturate(1.04);
  }

}

.login-content {
  width: 220px;

  text-align: center;

  position: relative;
  z-index: 2;
}

.brand {
  font-size: 15px;

  letter-spacing: .18em;

  text-transform: lowercase;

  color: rgba(63,52,45,.58);

  margin-bottom: 18px;
}

.welcome {
  min-height: 44px;

  display: flex;

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

  color: rgba(63,52,45,.86);

  font-size: 20px;

  font-weight: 450;

  letter-spacing: -.02em;

  transition:
    opacity .7s var(--ease);
}

.login-form {
  margin-top: 24px;

  display: flex;
  flex-direction: column;

  gap: 9px;
}

.login-form input {
  width: 100%;

  border:
    1px solid rgba(63,52,45,.09);

  outline: none;

  border-radius: 18px;

  padding: 12px 16px;

  color: var(--ink);

  background:
    rgba(255,255,255,.27);

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

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

.login-form input:focus {
  background:
    rgba(255,255,255,.44);

  border-color:
    rgba(255,155,98,.32);

  box-shadow:
    0 0 0 4px
    rgba(255,155,98,.08);
}

.login-form input::placeholder {
  color:
    rgba(63,52,45,.42);
}

.login-button {
  border: 0;

  border-radius: 18px;

  padding: 12px 16px;

  color: #fff;

  background:
    rgba(225,126,74,.84);

  cursor: pointer;

  transition:
    transform .25s var(--ease),
    background .25s ease;
}

.login-button:hover {
  background:
    rgba(218,116,65,.92);
}

.login-button:active {
  transform: scale(.97);
}

.login-error {
  min-height: 18px;

  margin-top: 4px;

  color:
    rgba(150,62,50,.82);

  font-size: 12px;
}

.early-access {
  display: inline-block;

  margin-top: 16px;

  color:
    rgba(63,52,45,.34);

  font-size: 10px;

  letter-spacing: .05em;

  text-decoration: none;

  transition:
    color .4s ease,
    opacity .4s ease;
}

.early-access:hover {
  color:
    rgba(63,52,45,.58);
}


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

#select {
  display: flex;

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

.select-inner {
  width:
    min(440px, calc(100% - 40px));
}

.select-title {
  text-align: center;

  font-size: 18px;

  font-weight: 450;

  margin-bottom: 34px;
}

.convo-list {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.convo-row {
  appearance: none;

  width: 100%;

  border: 0;

  background: transparent;

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 13px 8px;

  color: var(--ink);

  text-align: left;

  border-radius: 16px;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s var(--ease);
}

.convo-row:hover {
  background:
    rgba(255,255,255,.25);
}

.convo-row:active {
  transform: scale(.985);
}


/* =========================================================
   PRESENCE
   ========================================================= */

.presence {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  position: relative;
}

.presence::after {
  content: "";

  position: absolute;

  inset: -5px;

  border-radius: 50%;

  background: inherit;

  opacity: .18;

  filter: blur(4px);
}


/* =========================================================
   CHAT
   ========================================================= */

#chat {
  display: flex;

  flex-direction: column;
}

.chat-header {
  height: 64px;

  flex: 0 0 64px;

  display: flex;

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

  position: relative;

  z-index: 5;
}

.chat-name {
  font-size: 15px;

  font-weight: 450;

  letter-spacing: -.01em;

  color:
    rgba(63,52,45,.82);
}

.back {
  position: absolute;

  left: 14px;
  top: 14px;

  width: 36px;
  height: 36px;

  border: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,.17);

  color:
    rgba(63,52,45,.54);

  font-size: 25px;

  line-height: 1;

  cursor: pointer;
}

.chat-header .menu {
  position: absolute;

  right: 17px;
  top: 18px;

  border: 0;

  background: transparent;

  color:
    rgba(63,52,45,.42);

  font-size: 19px;

  cursor: pointer;

  padding: 0;

  transition:
    color .3s ease,
    transform .3s var(--ease);
}

.chat-header .menu:hover {
  color:
    rgba(63,52,45,.68);

  transform:
    scale(1.08);
}


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

#thoughts {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

  padding:
    22px
    max(22px, calc((100vw - 720px) / 2))
    100px;

  scrollbar-width: none;
}

#thoughts::-webkit-scrollbar {
  display: none;
}

.group {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  max-width: 680px;

  margin-left: auto;
  margin-right: auto;

  opacity: 0;

  transform: translateY(7px);

  animation:
    thoughtIn .55s var(--ease) forwards;
}

@keyframes thoughtIn {

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

.group .presence {
  margin-top: 9px;

  opacity: .68;
}

.lines {
  display: flex;

  flex-direction: column;

  gap: 11px;

  min-width: 0;
}

.thought {
  font-size:
    clamp(17px, 2.2vw, 19px);

  line-height: 1.52;

  letter-spacing: -.018em;

  font-weight: 420;

  color:
    rgba(63,52,45,.92);

  overflow-wrap: anywhere;
}


/*
  Time is expressed primarily through space.
*/

.group.gap-small {
  margin-top: 26px;
}

.group.gap-medium {
  margin-top: 62px;
}

.group.gap-large {
  margin-top: 125px;
}


/* =========================================================
   NEW DAY
   ========================================================= */

.new-day {
  width: 100%;

  text-align: center;

  color:
    rgba(63,52,45,.31);

  font-size: 11px;

  letter-spacing: .08em;

  text-transform: lowercase;

  margin:
    78px 0 12px;

  opacity: 0;

  animation:
    dayIn .8s var(--ease) forwards;
}

@keyframes dayIn {

  to {
    opacity: 1;
  }

}


/* =========================================================
   RECEIVER PREVIEW
   ========================================================= */

.preview {
  max-width: 680px;

  margin:
    48px auto 0;

  display: flex;

  align-items: flex-start;

  gap: 14px;

  opacity: 0;

  animation:
    previewIn 1.15s var(--ease)
    forwards;
}

@keyframes previewIn {

  from {
    opacity: 0;

    transform:
      translateY(8px);

    filter: blur(4px);
  }

  to {
    opacity: .27;

    transform:
      translateY(0);

    filter: blur(0);
  }

}

.preview .presence {
  margin-top: 9px;
}

.preview-lines {
  display: flex;

  flex-direction: column;

  gap: 11px;
}

.preview .thought {
  color:
    rgba(63,52,45,.82);
}


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

.composer-shell {
  position: relative;

  flex: 0 0 auto;

  padding:
    12px
    max(18px, calc((100vw - 720px) / 2))
    max(16px, env(safe-area-inset-bottom));

  background:
    linear-gradient(
      to bottom,
      rgba(255,248,241,0),
      rgba(255,248,241,.54) 35%,
      rgba(255,248,241,.72)
    );
}

.pending {
  max-width: 680px;

  margin:
    0 auto 10px;

  padding:
    0 15px;

  display: flex;

  flex-direction: column;

  gap: 8px;

  opacity: .32;
}

.pending-line {
  font-size: 15px;

  line-height: 1.45;
}

.composer {
  max-width: 680px;

  margin: auto;

  display: flex;

  align-items: flex-end;

  gap: 10px;

  padding:
    11px 11px 11px 17px;

  border:
    1px solid rgba(63,52,45,.07);

  border-radius: 22px;

  background:
    rgba(255,255,255,.25);

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

  transition:
    background .4s ease,
    border-color .4s ease,
    box-shadow .5s ease;
}

.composer:focus-within {
  background:
    rgba(255,255,255,.38);

  border-color:
    rgba(255,155,98,.18);

  box-shadow:
    0 10px 40px
    rgba(255,164,103,.07),

    0 0 0 4px
    rgba(255,164,103,.035);
}

#input {
  flex: 1;

  width: 100%;

  min-height: 25px;

  max-height: 110px;

  resize: none;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--ink);

  font-size: 16px;

  line-height: 1.45;

  padding: 1px 0;

  overflow-y: auto;
}

#input::placeholder {
  color:
    rgba(63,52,45,.39);
}

#send {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  border: 0;

  border-radius: 50%;

  color: white;

  background:
    rgba(225,126,74,.58);

  cursor: pointer;

  display: flex;

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

  font-size: 17px;

  transition:
    transform .3s var(--ease),
    background .4s ease,
    box-shadow .5s ease;
}

#send.ready {
  background:
    rgba(225,126,74,.9);

  box-shadow:
    0 0 22px
    rgba(255,155,98,.24);
}

#send:active {
  transform: scale(.91);
}

.composer-hint {
  max-width: 680px;

  margin:
    6px auto 0;

  padding-left: 18px;

  color:
    rgba(63,52,45,.24);

  font-size: 10px;
}


/* =========================================================
   SIGN OUT
   ========================================================= */

.signout-overlay {
  position: fixed;

  inset: 0;

  z-index: 50;

  display: flex;

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

  background:
    rgba(63,52,45,.06);

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

  animation:
    overlayIn .35s var(--ease);
}

@keyframes overlayIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

.signout-card {
  width:
    min(270px, calc(100vw - 48px));

  padding: 22px;

  border:
    1px solid rgba(63,52,45,.07);

  border-radius: 22px;

  background:
    rgba(255,248,241,.72);

  box-shadow:
    0 20px 70px
    rgba(90,60,40,.10);

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

  animation:
    cardIn .45s var(--ease);
}

@keyframes cardIn {

  from {
    opacity: 0;

    transform:
      translateY(8px)
      scale(.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}

.signout-title {
  text-align: center;

  font-size: 15px;

  color:
    rgba(63,52,45,.78);

  margin-bottom: 18px;
}

.signout-actions {
  display: flex;

  gap: 8px;
}

.signout-actions button {
  flex: 1;

  border: 0;

  border-radius: 14px;

  padding: 10px;

  font-size: 13px;

  cursor: pointer;

  transition:
    transform .25s var(--ease),
    background .3s ease;
}

.signout-actions button:active {
  transform: scale(.96);
}

.stay-button {
  color:
    rgba(63,52,45,.72);

  background:
    rgba(255,255,255,.34);
}

.stay-button:hover {
  background:
    rgba(255,255,255,.55);
}

.signout-button {
  color:
    rgba(120,62,50,.72);

  background:
    rgba(245,165,187,.17);
}

.signout-button:hover {
  background:
    rgba(245,165,187,.28);
}


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

@media (max-width: 600px) {

  .login-orb {
    width: 82vw;
    height: 82vw;

    min-width: 280px;
    min-height: 280px;
  }

  #thoughts {
    padding-left: 20px;
    padding-right: 20px;
  }

  .thought {
    font-size: 17px;
  }

  .group {
    gap: 12px;
  }

}


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

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

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

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

    scroll-behavior: auto !important;
  }

}