/*
 * Hosted support page.
 *
 * This opens from a "Contact support" line inside an app, usually in a web
 * view, so it is the whole screen rather than a card floating on a page: a
 * thin bar saying whose support this is, the conversation filling everything
 * else, one line at the bottom. Writing by email is a way out of the chat, not
 * a choice to make on arrival.
 */

/*
 * The page itself never scrolls.
 *
 * Only the conversation does: the bar you write in, the name at the top and
 * the switch stay where they are, the way they would in an app. A page that
 * scrolls as a whole takes the composer off screen exactly when someone is
 * reading the answer they want to reply to.
 */
body.contact {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--surface-sunken);
  display: flex;
  flex-direction: column;
}

.contact-shell {
  position: relative;
  width: 100%;
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* ----------------------------------------------------------------- top */

/*
 * The name floats over the conversation in a glass pill, the way a phone shows
 * what is happening at the top of the screen. The switch between chat and
 * email sits in the same bar, centred, so the page has one row of chrome
 * instead of a header and a toolbar.
 */
.contact-top {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 12px; right: 12px;
  z-index: 5;
  display: flex; align-items: center; gap: 12px;
  pointer-events: none;
}
.contact-top > * { pointer-events: auto; }

.island {
  display: flex; align-items: center; gap: 10px;
  max-width: min(34%, 230px);
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 1px 1px rgba(10, 37, 64, 0.04),
    0 10px 30px -12px rgba(10, 37, 64, 0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.island .mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; overflow: hidden;
  font-size: 14px; font-weight: 640;
}
.island .mark img { width: 100%; height: 100%; object-fit: cover; }
.contact-title { min-width: 0; }
.contact-title h1 {
  font-size: 14px; letter-spacing: -0.01em; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Centred on the screen, not on what is left of the row. */
.contact-tabs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 10px 30px -12px rgba(10, 37, 64, 0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.contact-tab {
  height: 30px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; color: var(--muted);
  font-size: 13px; font-weight: 560; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.contact-tab:hover { color: var(--navy); }
.contact-tab.is-active {
  background: #fff; color: var(--navy);
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.12);
}

/* ---------------------------------------------------------------- main */

.contact-main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: #fff;
  /*
   * Not clipped: the composer's shadow falls past the bottom of this box, and
   * hiding the overflow cut it into a hard white line. The scrolling happens
   * inside the message list, so nothing needs clipping here.
   */
  overflow: visible;
}

/*
 * The two views sit side by side in the reader's head, so moving between them
 * slides. Nothing else animates on arrival: a page that fades in every time is
 * slower on the second visit, and this one is opened by people with a problem.
 */
.contact-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@keyframes view-from-right { from { transform: translateX(26px); opacity: 0.55; } }
@keyframes view-from-left { from { transform: translateX(-26px); opacity: 0.55; } }
.slide-from-right { animation: view-from-right 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.slide-from-left { animation: view-from-left 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .slide-from-right, .slide-from-left { animation: none; }
}

/*
 * The widget clips itself, because it is a rounded panel floating over someone
 * else's page. Here it is the page, and clipping cut the bottom off the
 * composer's shadow, which is what left a white line across it.
 */
.contact-main .chat { flex: 1; min-height: 0; background: #fff; overflow: visible; }

/*
 * The conversation keeps a readable column while the page runs edge to edge.
 *
 * The padding keeps the first message clear of the floating island when the
 * log sits at the top. The mask handles the rest of the time: scrolled down,
 * a message would otherwise slide under a pill that is only mostly opaque, and
 * half-legible text behind frosted glass reads as a broken page rather than a
 * deliberate one. It dissolves before it gets there instead.
 */
.contact-main .chat-log,
.contact-main .chat-history {
  width: min(760px, 100%); margin: 0 auto;
  padding: 92px 20px 10px;
  --fade-from: 46px;
  --fade-to: 88px;
  mask-image: linear-gradient(to bottom, transparent 0, transparent var(--fade-from), #000 var(--fade-to));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--fade-from), #000 var(--fade-to));
}

/*
 * The composer floats. No rule above it and none below: a separator at the
 * bottom of a screen is a line drawn under nothing.
 */
/* The end of conversation card follows the same column as the messages. */
.contact-main .chat-actions {
  width: min(760px, 100%); margin: 0 auto;
  padding: 4px 20px 6px;
}
.contact-main .chat-foot {
  border: 0; background: none;
  width: min(760px, 100%); margin: 0 auto;
  padding: 6px 20px 14px;
}
.contact-main .chat-input-row {
  border-radius: 18px;
  padding: 7px 7px 7px 16px;
  align-items: center;
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 6px 20px -10px rgba(10, 37, 64, 0.25);
}
.contact-main .chat-input-row:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    0 6px 20px -10px rgba(10, 37, 64, 0.25);
}
.contact-main .chat-send { width: 38px; height: 38px; border-radius: 13px; }
/* The plane points right, so its mass sits left of centre. Nudge it back. */
.chat-send svg { transform: translateX(1px); }
.contact-main .chat-brand { display: none; }

/* ---------------------------------------------------------------- form */

.contact-form {
  width: min(680px, 100%); margin: 0 auto;
  padding: 96px 20px 30px; display: grid; gap: 18px;
  flex: 1; min-height: 0; overflow-y: auto;
  align-content: start;
}
.contact-form h2 { font-size: 18px; letter-spacing: -0.01em; }
.contact-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.contact-success {
  padding: 120px 24px 56px; text-align: center;
  display: grid; gap: 12px; place-items: center; align-content: start;
  flex: 1; min-height: 0; overflow-y: auto;
}
.contact-success .mark-ok {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green-wash); color: var(--green);
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------- foot */

.contact-foot {
  flex: none;
  display: flex; align-items: center;
  padding: 0 20px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  background: #fff;
}
.brand-pill {
  font-size: 11.5px; color: var(--faint);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand-pill a { color: var(--muted); font-weight: 560; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

@media (max-width: 680px) {
  .contact-form .grid-2 { grid-template-columns: 1fr; }
}

/* Too narrow for a centred pill beside the name: stack them, both centred. */
@media (max-width: 560px) {
  .contact-top { flex-direction: column; align-items: center; gap: 8px; }
  .island { max-width: min(100%, 320px); }
  .contact-tabs { position: static; transform: none; align-self: center; }
  /* Stacked into two rows, so the bar is taller and the fade starts lower. */
  .contact-main .chat-log,
  .contact-main .chat-history { padding-top: 134px; --fade-from: 88px; --fade-to: 130px; }
  .contact-form { padding-top: 142px; }
  .contact-success { padding-top: 164px; }
}