/*
 * chat.css - The "Ask about Lens" panel (chat.js): a black pill at the bottom right of every page (white in the
 * dark), and the card it opens in its place, in the site's tokens (extra.css) and fonts. It loads nothing: the
 * MachAI mark in the panel's head is drawn by extra.css, with the site's other images.
 * z-index 3 keeps it above the page, and below what Material lays over it: the header and its search (4), the
 * navigation drawer and its overlay (5).
 */

.lens-chat {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 3;
  font-size: 0.7rem; /* 14 px */
  line-height: 1.5;
  color: var(--lens-text);
}

.lens-chat [hidden] {
  display: none !important;
}

/* As weak as an element selector, so each part's own class below sets its colours. */
:where(.lens-chat) button,
:where(.lens-chat) input,
:where(.lens-chat) textarea {
  font: inherit;
  color: inherit;
}

.lens-chat button {
  cursor: pointer;
}

.lens-chat button:focus-visible,
.lens-chat input:focus-visible,
.lens-chat textarea:focus-visible,
.lens-chat a:focus-visible {
  outline: 0.1rem solid var(--lens-accent);
  outline-offset: 0.1rem;
}

/* The panel's own button: a pill with a speech bubble, as the header's "Ask about Lens" (extra.css). */
.lens-chat__open {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.4rem; /* 48 px */
  padding: 0 0.9rem 0 0.7rem;
  border: 0;
  border-radius: 1.2rem;
  background-color: var(--lens-text);
  color: var(--lens-ground);
  font-weight: 500;
  box-shadow: 0 0.5rem 1.4rem #00000040;
}

.lens-chat__open::before {
  content: "";
  box-sizing: border-box;
  width: 0.75rem;
  height: 0.75rem;
  border: 0.1rem solid currentcolor;
  border-radius: 50% 50% 50% 0.1rem;
}

/* The card. */
.lens-chat__panel {
  display: flex;
  flex-direction: column;
  width: 21rem; /* 420 px */
  max-width: calc(100vw - 3.2rem);
  max-height: calc(100vh - 6rem); /* clear of the header */
  max-height: calc(100dvh - 6rem); /* and of a phone browser's own bars, where it knows dvh */
  overflow: hidden;
  border-radius: 1.2rem; /* 24 px */
  background-color: var(--lens-panel);
  box-shadow: var(--lens-shadow-float);
}

.lens-chat__panel:focus {
  outline: none; /* focus rests here while a question is out; the fields show their own */
}

/* Its head: the mark, "Ask about Lens" with what it answers from under it, and a round close button. */
.lens-chat__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-bottom: 0.05rem solid var(--lens-border);
  background-color: var(--lens-panel);
  color: var(--lens-text);
}

.lens-chat__title {
  margin: 0 auto 0 0;
  font-size: 0.75rem; /* 15 px */
  font-weight: 600;
  line-height: 1.3;
}

.lens-chat__title::after {
  content: "Answers only from these pages";
  display: block;
  color: var(--lens-text-2);
  font-size: 0.6rem; /* 12 px */
  font-weight: 400;
}

.lens-chat__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.6rem; /* 32 px */
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--lens-ground-2);
  color: var(--lens-text);
  font-size: 0.9rem;
  line-height: 1;
}

.lens-chat__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.lens-chat__body p {
  margin: 0 0 0.4rem;
}

/* Asking: only the answers scroll; the starters, the box and the account line stay where they are. */
.lens-chat__ask {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.lens-chat__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Before the first question the starters come first, and the box keeps to the bottom. */
.lens-chat__log:empty {
  flex: 0 0 auto;
}

/* One question and its reply: the question in the accent at the right, the reply in grey at the left. */
.lens-chat__exchange {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
}

.lens-chat__body .lens-chat__question {
  align-self: flex-end;
  max-width: 85%;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 0.9rem 0.9rem 0.2rem 0.9rem;
  background-color: var(--lens-user-bubble);
  color: #ffffff;
  line-height: 1.45;
}

.lens-chat__question,
.lens-chat__answer p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lens-chat__answer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 95%;
}

/* The reply's own words: lens-answer writes an answer as one paragraph. */
.lens-chat__body .lens-chat__answer > p:not([class]) {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.2rem 0.9rem 0.9rem 0.9rem;
  background-color: var(--lens-ground-2);
  line-height: 1.55;
}

/* "Not in the records": the refusal's colours, the closest page a link in it. */
.lens-chat__body .lens-chat__answer[data-verdict="not-in-records"] > p:not([class]),
.lens-chat__body .lens-chat__answer[data-verdict="refused"] > p:not([class]) {
  border: 0.05rem solid var(--lens-refusal-border);
  background-color: var(--lens-refusal-bg);
  color: var(--lens-refusal-text);
}

.lens-chat a {
  color: var(--lens-accent);
}

/* The pages an answer cites: each a card with a page sign, its title, its section, and a chevron. */
.lens-chat__cited {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lens-chat__cited li {
  position: relative;
}

.lens-chat__cited a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.6rem;
  padding: 0.5rem 1.8rem 0.5rem 2.6rem;
  border: 0.05rem solid var(--lens-border);
  border-radius: 0.6rem;
  background-color: var(--lens-panel);
  color: var(--lens-text);
  font-size: 0.65rem; /* 13 px */
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.lens-chat__cited a:hover {
  border-color: var(--lens-outline);
}

/* The page sign: a tinted square with three lines of text drawn in it. */
.lens-chat__cited li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.6rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.4rem;
  background:
    linear-gradient(var(--lens-accent), var(--lens-accent)) 50% 32% / 0.5rem 0.1rem no-repeat,
    linear-gradient(var(--lens-accent), var(--lens-accent)) 50% 50% / 0.5rem 0.1rem no-repeat,
    linear-gradient(var(--lens-accent), var(--lens-accent)) 50% 68% / 0.35rem 0.1rem no-repeat,
    var(--lens-accent-tint);
  transform: translateY(-50%);
  pointer-events: none;
}

.lens-chat__cited li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.8rem;
  width: 0.35rem;
  height: 0.35rem;
  border-top: 0.1rem solid var(--lens-accent);
  border-right: 0.1rem solid var(--lens-accent);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

/* The section the page is in, under its title, from where the link leads. */
.lens-chat__cited a::after {
  color: var(--lens-text-2);
  font-size: 0.6rem; /* 12 px */
  font-weight: 400;
}

.lens-chat__cited a[href$=".dev/"]::after { content: "Home"; }
.lens-chat__cited a[href*="/start/"]::after { content: "Start here"; }
.lens-chat__cited a[href*="/concepts/"]::after { content: "Concepts"; }
.lens-chat__cited a[href*="/errors/"]::after { content: "Errors"; }
.lens-chat__cited a[href*="/guides/"]::after { content: "Guides"; }
.lens-chat__cited a[href*="/reference/"]::after { content: "Reference"; }
.lens-chat__cited a[href*="/releases/"]::after { content: "Releases"; }

/* The small print under a reply: the records it was answered from. */
.lens-chat__verdict,
.lens-chat__account {
  color: var(--lens-text-2);
  font-size: 0.55rem; /* 11 px */
}

.lens-chat__body .lens-chat__verdict {
  margin: 0;
}

/* "Helpful" and "Not helpful": small pills, then "Thanks". */
.lens-chat__body .lens-chat__feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--lens-text-2);
  font-size: 0.6rem;
}

.lens-chat__rate {
  height: 1.4rem; /* 28 px */
  padding: 0 0.6rem;
  border: 0.05rem solid var(--lens-outline); /* 3:1 and more against the panel, in both schemes */
  border-radius: 0.7rem;
  background-color: var(--lens-panel);
  color: var(--lens-text);
}

.lens-chat__rate:hover:enabled {
  border-color: var(--lens-accent);
  color: var(--lens-accent);
}

.lens-chat__rate:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The questions a reader can start from: pills over the box. */
.lens-chat__starters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.lens-chat__starters p {
  flex-basis: 100%;
  margin: 0 0 0.2rem;
  color: var(--lens-text-2);
}

.lens-chat__starter {
  min-height: 1.5rem; /* 30 px */
  padding: 0.2rem 0.6rem;
  border: 0.05rem solid var(--lens-outline); /* 3:1 and more against the panel, in both schemes */
  border-radius: 0.75rem;
  background-color: var(--lens-panel);
  color: var(--lens-text);
  font-size: 0.6rem; /* 12 px */
  text-align: left;
}

.lens-chat__starter:hover {
  border-color: var(--lens-accent);
  color: var(--lens-accent);
}

/* The forms. Signing in: the field and the button as pills. Asking: a pill for the question with a round send
   button beside it, the waiting line over them, and the line under the box rule apart from the replies. */
.lens-chat__form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lens-chat label,
.lens-chat__heading {
  font-weight: 600;
}

.lens-chat input,
.lens-chat textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: 0.05rem solid var(--lens-outline); /* 3:1 and more against the panel, in both schemes */
  border-radius: 1rem;
  background-color: var(--lens-panel);
  line-height: 1.4;
}

.lens-chat input::placeholder,
.lens-chat textarea::placeholder {
  color: var(--lens-text-2);
  opacity: 1;
}

.lens-chat input:disabled,
.lens-chat textarea:disabled {
  opacity: 0.6;
}

.lens-chat__send {
  align-self: flex-start;
  min-height: 2rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 1rem;
  background-color: var(--lens-accent);
  color: var(--lens-accent-ink);
  font-weight: 600;
}

.lens-chat__send:disabled {
  opacity: 0.6;
  cursor: default;
}

.lens-chat__ask .lens-chat__form {
  display: grid;
  grid-template-areas: "status status" "label label" "field send";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.2rem 0.4rem;
  margin: auto -1rem 0;
  padding: 0.6rem 0.8rem 0;
  border-top: 0.05rem solid var(--lens-border);
}

/* An empty waiting line takes no room, and stays in place for what it will say. */
.lens-chat__ask .lens-chat__status:empty {
  min-height: 0;
}

/* The question's label is for screen readers: the box says what it is for (its placeholder). */
.lens-chat__ask label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lens-chat__ask textarea {
  grid-area: field;
  min-height: 2rem; /* 40 px, one line */
  height: 2rem;
  max-height: 6rem;
  resize: none;
  field-sizing: content; /* grows with a longer question, where the browser can */
}

.lens-chat__ask .lens-chat__send {
  position: relative;
  grid-area: send;
  width: 2rem; /* round, the arrow drawn below; its word, Ask, is what a screen reader says */
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}

.lens-chat__ask .lens-chat__send::before,
.lens-chat__ask .lens-chat__send::after {
  content: "";
  position: absolute;
  left: 50%;
  box-sizing: border-box;
}

.lens-chat__ask .lens-chat__send::before {
  top: 0.55rem;
  width: 0.1rem;
  height: 0.9rem;
  margin-left: -0.05rem;
  background-color: currentcolor;
}

.lens-chat__ask .lens-chat__send::after {
  top: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.275rem;
  border-top: 0.1rem solid currentcolor;
  border-left: 0.1rem solid currentcolor;
  transform: rotate(45deg);
}

.lens-chat__ask .lens-chat__status {
  grid-area: status;
}

.lens-chat__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lens-accent);
  text-decoration: underline;
}

.lens-chat__status {
  min-height: 1.5em;
  color: var(--lens-text-2);
}

.lens-chat__body .lens-chat__status {
  margin: 0;
}

.lens-chat__body .lens-chat__account {
  margin: 0.4rem 0 0;
}

/* The waiting line's indicator: a ring that turns, quiet enough to read past. */
.lens-chat__waiting {
  display: inline-block;
  box-sizing: border-box;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 0.1rem solid var(--lens-border);
  border-top-color: var(--lens-accent);
  border-radius: 50%;
  animation: lens-chat-turn 0.9s linear infinite;
}

@keyframes lens-chat-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lens-chat__waiting {
    animation: none;
  }
}

/* Under the pointer, over 200 ms: the pills and the buttons change colour; a reader who asks for less motion
   sees the change at once. */
.lens-chat__open:hover {
  background-color: var(--lens-ask-hover);
}

.lens-chat__send:hover:enabled {
  background-color: var(--lens-accent-hover);
}

.lens-chat__close:hover {
  background-color: var(--lens-border);
}

.lens-chat__open,
.lens-chat__send,
.lens-chat__close,
.lens-chat__starter,
.lens-chat__rate,
.lens-chat__cited a {
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .lens-chat__open,
  .lens-chat__send,
  .lens-chat__close,
  .lens-chat__starter,
  .lens-chat__rate,
  .lens-chat__cited a {
    transition: none;
  }
}

/* A phone, under 480 px wide: the open panel fills the screen, over the header and the drawer, its close
   button at the top. chat.js sizes it to what the keyboard leaves of the screen (window.visualViewport), so
   the box stays above the keyboard while the answers scroll. Fields at 16 px: iOS zooms into smaller ones.
   The starters are rows the width of the screen, as the reference has them. */
@media (max-width: 479.98px) {
  .lens-chat {
    right: 0.8rem;
  }

  .lens-chat--open {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
  }

  .lens-chat--open .lens-chat__panel {
    position: fixed;
    top: var(--lens-chat-top, 0px);
    left: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: var(--lens-chat-height, 100dvh);
    max-height: none;
    border-radius: 0;
  }

  .lens-chat__close {
    min-width: 2.2rem;
    min-height: 2.2rem;
    font-size: 1.1rem;
  }

  .lens-chat input,
  .lens-chat textarea {
    font-size: 16px;
  }

  .lens-chat__ask textarea {
    min-height: 2.2rem;
    height: 2.2rem;
  }

  .lens-chat__ask .lens-chat__send {
    width: 2.2rem;
    height: 2.2rem;
  }

  .lens-chat__ask .lens-chat__send::before,
  .lens-chat__ask .lens-chat__send::after {
    top: 0.65rem;
  }

  .lens-chat__starter {
    position: relative;
    flex-basis: 100%;
    min-height: 2.2rem; /* 44 px */
    padding: 0.5rem 1.8rem 0.5rem 0.8rem;
    border-radius: 0.7rem;
    font-size: 0.7rem;
  }

  .lens-chat__starter::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.8rem;
    width: 0.35rem;
    height: 0.35rem;
    border-top: 0.1rem solid var(--lens-accent);
    border-right: 0.1rem solid var(--lens-accent);
    transform: translateY(-50%) rotate(45deg);
  }
}

@media print {
  .lens-chat {
    display: none;
  }
}