/* L6: the hosted agent page. It carries the customer's brand like the widget
   (docs/BRAND.md, "The widget"): the visitor's system font, the owner's
   accent and corners from the shared chat styles (/assets/style.css), no
   Hazelchat colours, gradients or illustration. This file only turns the
   widget's column into a full page: one centred column of at most 720 px,
   with the header and composer lines running the full width. */
.agent-page {
  --column: 720px;
  --gutter: max(16px, calc((100vw - var(--column)) / 2));
  height: var(--page-height, 100dvh);
  overflow: hidden;
}
.agent-page header,
.agent-page #log,
.agent-page #composer {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.agent-page header {
  padding-top: max(14px, env(safe-area-inset-top));
  align-items: flex-start;
}
.agent-page #mark {
  width: 44px;
  height: 44px;
}
.agent-page h1 {
  font-size: 17px;
}
#official {
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
#official a {
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
#official a:hover {
  text-decoration: underline;
}
.page-privacy {
  align-self: center;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 13px;
  text-decoration: none;
}
.page-privacy:hover {
  color: var(--ink);
  background: var(--line);
}
.agent-page header button {
  align-self: center;
}
.agent-page #log {
  padding-top: 20px;
}
/* The composer keeps the widget's cap on its own height on a phone, so a
   long enquiry form scrolls inside it instead of hiding the transcript. */
.agent-page #composer {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  max-height: 70%;
}
.page-foot {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.page-foot .branding {
  margin: 0;
}
.page-foot a#report-link {
  color: var(--ink-faint);
}
.page-foot a#report-link:hover {
  color: var(--ink);
}
/* On a phone the header keeps the business and the website on one or two
   lines; the privacy link stays reachable beside them. */
@media (max-width: 480px) {
  .agent-page header {
    gap: 10px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }
  .agent-page #mark {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  /* The business name keeps to one line so the transcript keeps its room
     when the keyboard is open. The website it names is never cut short:
     it is how a visitor tells the business's own page from an imitation. */
  .agent-page h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .agent-page h1 {
    font-size: 16px;
  }
  .agent-page #mode {
    font-size: 11.5px;
  }
  .page-privacy {
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .agent-page header button {
    width: 32px;
    height: 32px;
  }
  .page-foot {
    margin-top: 6px;
  }
}
/* A very short view is a phone with the keyboard open: the footer rows
   (enquiry and privacy links, "Powered by", report) wait until it closes,
   so the answer being read and the composer keep the room. The header,
   with the website the page names and the mode disclosure, stays. */
@media (max-height: 420px) {
  .agent-page:not(.unavailable-page) #composer .footer,
  .agent-page:not(.unavailable-page) .page-foot {
    display: none;
  }
  .agent-page #composer {
    padding-top: 8px;
  }
}
.agent-page.unavailable-page {
  height: 100dvh;
}