/* Landing page (the public "/" home page). Served by the `/` route in src/server.ts, which fills in
   {{APP_NAME}} + the Google verification tag. Edit any file under styles/ and just refresh — no restart.

   This file is a manifest. The styles live in a small util library under styles/; order matters:
   tokens define the vars, base/components/msg consume them, and utilities load LAST so a class like
   .mt-28 wins equal-specificity ties over the component classes. */
@import './styles/google.css';    /* vendored "Sign in with Google" button */
@import './styles/tokens.css';    /* palette (light/dark) + type & spacing scales */
@import './styles/base.css';      /* @font-face, reset, element/prose layer */
@import './styles/components.css';/* .tag .muted .footer .theme-picker */
@import './styles/msg.css';       /* the SMS-bubble wordmark (variant-ready) */
@import './styles/utilities.css'; /* margin/padding/gap utilities — LAST */

/* Dashboard shortcut, top-right — a bare icon, only rendered by the / route when signed in */
.home-dash {
  position: fixed;
  top: var(--space-16);
  right: var(--space-16);
  z-index: 10;
  display: inline-flex;
  color: var(--muted);
  text-decoration: none;
}
.home-dash:hover { color: var(--text); }
.home-dash svg { width: 24px; height: 24px; }

.home {
  --msg-container-max-width: 15rem;

  .home-big {
    line-height: 1.2;
  }

  /* hero wordmark: a gray "typing" bubble slides in from the bottom-left, types a
     beat, then rises + fades as the green wordmark bubble rises up from below to
     take its place. the 4rem window clips whatever is off-screen. it's a conveyor
     — every bubble enters from below and exits upward — so replaying on click
     reads as a fresh incoming message (a loop), not a rewind. the inline script in
     home.html drives the state classes; .no-anim snaps a bubble back to its
     entrance spot between beats with no visible move. */
  .home-msg-container {
    height: 4rem;
    overflow: hidden;
    width: fit-content;

    &.no-anim .home-msg { transition: none; }

    &.typing-in .home-msg--typing { opacity: 1; transform: none; }
    &.typing-out .home-msg--typing { opacity: 0; transform: translateY(-0.6em) scale(1.1); }

    &.green-in .home-msg--sent { opacity: 1; transform: scale(1) translateY(-3.5em); }
    &.green-out .home-msg--sent { opacity: 0; transform: scale(1) translateY(-7em); }
  }

  .home-msg {
    align-items: center;
    display: flex;
    line-height: 1;
    min-height: 3rem;
    padding: 0.5em 0.75em;
    transition: opacity 0.4s ease, transform 0.5s ease;
    white-space: nowrap;

    .msg-arrow--bubbles {
      bottom: -0.3em;
      height: 0.75em;
      left: -0.3em;
      transform: scaleX(-1);
      width: 0.75em;
    }

    /* gray typing bubble — rests off-screen at the bottom-left, ready to slide in */
    &.home-msg--typing {
      --msg-color: light-dark(#E9E9EB, #3B3B3D);

      margin-left: 0.3em;
      opacity: 0;
      transform: translate(-1.2em, 2.2em) scale(0.7);

      .msg-text {
        align-items: center;
        display: flex;
        gap: 0.25em;
      }

      .msg-text-dot {
        animation: dot-typing 1.5s infinite;
        background: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 1));
        border-radius: 50%;
        display: inline-block;
        height: 0.5em;
        opacity: 0.5;
        width: 0.5em;

        /* stagger each dot by a third of the cycle */
        &:nth-child(2) { animation-delay: 0.5s; }
        &:nth-child(3) { animation-delay: 1s; }
      }
    }

    /* green wordmark bubble — waits below the clip, rises into view once sent */
    &.home-msg--sent {
      opacity: 0;
      transform: scale(0.5) translateY(0);
      transform-origin: 100% 50%;
      width: 11.15rem;
    }
  }
}

@keyframes dot-typing {
  0%, 100% { opacity: 0.325; }
  50%      { opacity: 0.75; }
}

.msg-container {
  --msg-container-bg: light-dark(rgba(255,255,255,1), rgba(255,255,255,0.1));
  --msg-container-border: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0));

  background: var(--msg-container-bg);
  border-radius: var(--radius-bubble);
  box-shadow: 0 0 0 1px var(--msg-container-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  max-width: var(--msg-container-max-width);
  padding: var(--space-8);

  .msg {
    margin-left: auto;
    max-width: 90%;

    &.msg--sender {
      margin-left: 0;
      margin-right: auto;
    }
  }
}

section {
  &.grid-2 {
    align-items: flex-start;

    @media (max-width: 840px) {
      max-width: var(--msg-container-max-width);
      margin-bottom: var(--space-48);
      gap: var(--space-16);
    }
  }

  h2 {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 0;
  }

  p,
  p.muted,
  ul.muted {
    font-size: 0.875rem;
    margin: 0 0 var(--space-8);
  }

  img + img {
    margin-left: var(--space-4);
  }
}

/* landing sign-in: phone number + a texted code (replaces the old "Continue with Google" button) */
.signin {
  margin: 0;
  max-width: 100%;

  .signin-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    position: relative;
    width: fit-content;

    &[hidden] { display: none; } /* the hidden attr must beat display:flex */
  }

  input {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    caret-color: var(--accent);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1;
    max-width: 100%;
    padding: 0.4em 0.75em 0.5em;
    width: 13rem;

    &:focus {
      outline: none;

      + .cta {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  #si-msg { margin: var(--space-8) 0 0; }
}

/* the message-bubble green button (shares its green with .invite-submit) */
.cta {
  background: light-dark(#70D173, #67ca67);
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  opacity: 0;
  padding: var(--space-8) var(--space-16);
  position: absolute;
  right: 0.25em;
  transform: scale(0.5);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  top: 0.25em;

  &:hover { filter: brightness(0.95); }

  /* icon-only send variant: one lucide glyph in an iMessage-style pill */
  &.cta-send {
    align-items: center;
    border-radius: 1em;
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.625em;
    justify-content: center;
    padding: 0;
    width: 2.5em;

    svg {
      display: block;
      height: 1.25em;
      width: 1.25em;
    }
  }
}

/* Request-invite modal */
.invite-dialog {
  width: min(26rem, calc(100vw - var(--space-32)));
  padding: var(--space-24);
  border: none;
  border-radius: var(--radius-bubble);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border-strong), 0 12px 40px rgba(0, 0, 0, 0.25);
  font-family: var(--font-sans);

  p.muted {
    font-size: 0.875rem;
    margin: 0 0 var(--space-8);
  }
}

.invite-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.invite-dialog h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-8);
}

.invite-dialog label {
  display: block;
  margin-top: var(--space-16);
  font-size: var(--fs-small);
}

.invite-dialog input,
.invite-dialog textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-10);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button);
  box-sizing: border-box;
}

.invite-dialog textarea {
  resize: vertical;
}

.invite-dialog input:focus,
.invite-dialog textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.invite-error {
  margin: var(--space-8) 0 0;
  color: light-dark(#c0392b, #ff8a80);
}

.invite-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin: var(--space-24) 0 0;
  padding: 0;
}

.invite-actions button {
  padding: var(--space-8) var(--space-16);
  font: inherit;
  border-radius: var(--radius-button);
  cursor: pointer;
}

.invite-submit {
  /* the message-bubble green (see .msg --msg-color), a touch bold like the h1 */
  color: #fff;
  background: light-dark(#70D173, #67ca67);
  border: 1px solid light-dark(#70D173, #67ca67);
  font-weight: var(--fw-bold);
}

.invite-submit:hover {
  filter: brightness(0.95);
}

.invite-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.invite-cancel {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
}