/* The web chat, a page of its own, in the demo's drawn phone and devices. */

/* Clerk's are-you-human check takes no room until Clerk puts one in. */
#clerk-captcha:empty {
  display: none;
}

.web .thread {
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
}

.web .bubble.stenzil {
  align-self: flex-start;
}

.web .bubble.stenzil p {
  background: var(--chrome);
  color: var(--ink);
}

.web .bubble.owner {
  align-self: flex-end;
}

.web .bubble.owner p {
  background: var(--violet);
  color: #fff;
}

.web .bubble img {
  display: block;
  max-width: 180px;
  max-height: 180px;
  margin: 0 0 4px auto;
  border-radius: 14px;
}

/* A preview's or a checkout's link, as a button under its words. */
.web .bubble .go {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.web .dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}

.web-steps {
  display: grid;
  gap: 6px;
  margin: 0;
}

.web-steps li[data-state="stopped"] {
  color: var(--muted-on-wash);
  text-decoration: line-through;
}

/* The ways to sign in: one per line, each a full-width button a thumb can find. */
.signin {
  display: grid;
  gap: 6px;
}

.signin .way {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #d6d1e8;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 15px/1.2 var(--body);
  cursor: pointer;
}

.signin .way.email {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.signin .small {
  margin: -2px 0 2px;
  color: var(--muted-on-wash);
  font-size: 13px;
  text-align: center;
}

.signin .small:empty {
  display: none;
}

.web-choice {
  margin: 0;
  color: var(--muted-on-wash);
  font-size: 13px;
}

.web .field input:not([type="file"]) {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  border: 0;
  padding: 7px 0;
  background: transparent;
  color: var(--ink);
  font: 16px/1.4 var(--body);
}

.web .field input:focus-visible {
  outline: none;
}

.web .field input::placeholder {
  color: var(--muted);
}

/* The photo button: a picture icon the size of Send, its file box out of sight but still the one that is tapped. */
.web .compose label.attach {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 0 0 -8px;
  overflow: visible;
  clip-path: none;
  border-radius: 50%;
  color: var(--violet);
  cursor: pointer;
}

.web .compose label.attach[hidden] {
  display: none;
}

.web .attach input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.web .attach:focus-within {
  box-shadow: 0 0 0 3px rgb(91 71 217 / 0.35);
}

.held {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.held li {
  position: relative;
}

.held img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}

.held button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
}

.web .golive {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--done);
  color: #fff;
  font: 700 16px/1.2 var(--body);
  cursor: pointer;
}

.web .golive:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Their own page, scaled into each screen at its real width. */
.web .screen iframe {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1023px) {
  body.web-on .web {
    gap: 16px;
  }

  /* On a phone the rebuilt page comes first, over the chat. */
  body.web-on .web .devices {
    order: -1;
    width: 100%;
  }

  body.web-on .web .chat {
    min-height: min(560px, calc(100svh - 120px));
  }

  body.web-on .web.ready .chat {
    min-height: 0;
  }

  body.web-on .web.ready .thread {
    flex: 0 1 220px;
  }
}

@media (min-width: 1024px) {
  body.web-on .web {
    grid-template-areas: "chat devices";
    grid-template-rows: auto;
    align-items: start;
  }

  body.web-on .web .devices {
    grid-area: devices;
  }
}