/*
 * Scenario tabs under the chat logo on the static design pages
 * (public/*-design.html): the first two scenarios and "More" as chips on one
 * row, with no panel behind them. The rules use two ids so they beat the pages'
 * single-id rules in any load order (but not their !important ones).
 */
#heroChatTabsBar #heroChatTabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#heroChatTabsBar #heroChatTabs button {
  flex: 0 0 auto;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #dde4ee;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #5d6f96;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
/* If a row still runs out of room, the scenario names give way with an ellipsis; "More" never does. */
#heroChatTabsBar #heroChatTabs [data-scenario] { flex-shrink: 1; min-width: 0; }
#heroChatTabsBar #heroChatTabs [data-scenario] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Touch screens keep :hover after a tap, which would make a tapped chip look selected. */
@media (hover: hover) {
  #heroChatTabsBar #heroChatTabs button:hover { border-color: #b9c6d8; color: #07143e; }
}
#heroChatTabsBar #heroChatTabs button[aria-current="true"] {
  border-color: #b9c6d8;
  background: #ffffff;
  color: #07143e;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(20, 51, 72, .08), 0 4px 12px rgba(20, 51, 72, .06);
}
#heroChatTabsBar #heroChatTabs button:focus-visible { outline: 2px solid #16534e; outline-offset: 2px; }
#heroChatTabsBar #heroChatTabs [data-more-scenarios] { padding-inline: 12px 10px; anchor-name: --hero-more; }
#heroChatTabsBar #heroChatTabs [data-more-scenarios] .material-symbols-outlined { font-size: 18px; }
/* Technology's long names swap to short labels on phones (phoneTabLabels in its page). */
#heroChatTabs .hero-tab-short { display: none; }

/*
 * Desktop: the chips sit at the bar's left, so the menu opens under "More".
 * Without anchor positioning the page's own right: 4px applies (the bar's right
 * edge); phones keep the page's full-width menu.
 */
@supports (anchor-name: --hero-more) {
  @media (min-width: 768px) {
    #heroChatTabsBar #heroMoreDropdown { position-anchor: --hero-more; left: anchor(left); right: auto; }
  }
}
@media (max-width: 767px) {
  #heroChatTabs .hero-tab-full { display: none; }
  #heroChatTabs .hero-tab-short { display: inline; }
}
/* Narrow phones: "More" shows only its icon; the button's aria-label keeps it named. */
@media (max-width: 399px) {
  #heroChatTabsBar #heroChatTabs [data-more-scenarios] { padding-inline: 10px; }
  #heroChatTabsBar #heroChatTabs [data-more-scenarios] > span:first-child { display: none; }
}
/* The narrowest phones (320px) fit the full names only with tighter chips. */
@media (max-width: 359px) {
  #heroChatTabsBar #heroChatTabs { gap: 4px; }
  #heroChatTabsBar #heroChatTabs button { padding: 5px 9px; font-size: 12px; }
  #heroChatTabsBar #heroChatTabs [data-more-scenarios] { padding-inline: 8px; }
}

/*
 * ASI-702 — mobile quick-action chips and the keyboard-aware sheet.
 * Two ids beat the pages' single-id inline rules in any load order (the inline
 * ones have no !important here). Mirrors the React fix in src/home/home.css.
 */
@media (max-width: 767px) {
  /* Chips: one line each, compact, the row scrolls sideways — not 40%-wide
     boxes whose text wrapped to two or three lines. */
  #hero-chat-container #heroQuickActions button {
    flex: 0 0 auto;
    max-width: 78vw;
    min-height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Lift the expanded sheet above the iOS software keyboard; --hero-kb is set
     from visualViewport in hero-chat-sheet.js and is 0 when it is closed.
     !important because the pages' inline .is-expanded rule has equal specificity
     and would otherwise win on load order. */
  #hero-chat-container.is-expanded {
    bottom: var(--hero-kb, 0px) !important;
  }
  #hero-chat-container.is-expanded > div {
    height: calc(92dvh - var(--hero-kb, 0px)) !important;
  }
}