/* HyperCurio — HC-300 and HC-301: the Ask HyperCurio panel.
 *
 * From pages 5 (portrait), 10 (landscape) and 15 (desktop) of the Welcome & Sign-in document.
 *
 *   portrait   a full-screen sheet OVER the page.
 *   landscape  docked to the right, page content narrower beside it. No Suggested list: at 292pt
 *              tall there is no room for one and the document does not draw it.
 *   desktop    docked to the right at about 300px, and the page content REFLOWS narrower rather
 *              than being covered. The document says so in as many words: "Hero visual reflows
 *              narrower while the assistant is docked."
 *
 * That last one is the whole design. A panel that overlays on desktop would be a different
 * product: you could not read the page and the answer at the same time, which is the point.
 *
 * Cyan belongs to the assistant and to nothing else, per the shared context, which is why every
 * accent in this file is --hc-assistant and why nothing else in the product uses it.
 */

.as-body { background: var(--hc-bg); }

/* The shell is a grid with one column, and a second appears when the assistant is docked. The
   page column is a real grid track rather than a margin, so the content reflows into the space
   that is left rather than being slid sideways under a floating panel. */
.as-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .as-shell[data-open="1"] { grid-template-columns: minmax(0, 1fr) minmax(280px, 34%); }
}
@media (min-width: 1024px) {
  .as-shell[data-open="1"] { grid-template-columns: minmax(0, 1fr) 380px; }
}

.as-page { min-width: 0; padding: var(--hc-6) var(--hc-pad) var(--hc-12); }

/* ---------------------------------------------------------------- the panel */
.as-panel {
  display: none; min-width: 0;
  background: var(--hc-surface-1); border-left: 1px solid var(--hc-border);
}
.as-shell[data-open="1"] .as-panel { display: flex; flex-direction: column; }

/* Portrait: a full-screen sheet over everything, because there is no room to sit beside a
   390px page. This is the one layout where the page is covered rather than narrowed. */
@media (max-width: 599px) {
  .as-shell[data-open="1"] .as-panel {
    position: fixed; inset: 0; z-index: 50; border-left: 0;
  }
}
@media (min-width: 600px) {
  .as-panel { position: sticky; top: 0; height: 100dvh; }
}

.as-head {
  display: flex; align-items: center; gap: var(--hc-3);
  padding: var(--hc-4) var(--hc-5); border-bottom: 1px solid var(--hc-border);
}
.as-head h2 {
  font-family: var(--hc-font-title); font-size: calc(18px * var(--hc-scale-title));
  display: inline-flex; align-items: center; gap: var(--hc-2); color: var(--hc-assistant);
}
.as-close {
  margin-left: auto; min-width: 44px; min-height: 44px; border-radius: 50%;
  border: 1px solid var(--hc-border); background: none; color: var(--hc-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.as-close:hover { background: var(--hc-surface-2); }

.as-thread { flex: 1 1 auto; overflow-y: auto; padding: var(--hc-5); display: grid; gap: var(--hc-4); align-content: start; }

/* The question the visitor asked, aligned right the way the document draws it. */
.as-q {
  justify-self: end; max-width: 85%;
  padding: var(--hc-3) var(--hc-4); border-radius: var(--hc-radius-card);
  background: var(--hc-surface-2); color: var(--hc-text); font-size: 14px;
}
.as-a { font-size: 15px; color: var(--hc-text); line-height: 1.55; }
.as-actions { display: flex; flex-wrap: wrap; gap: var(--hc-2); }
.as-action {
  display: inline-flex; align-items: center; gap: var(--hc-2);
  min-height: 44px; padding-inline: var(--hc-4);
  border: 1px solid var(--hc-assistant); border-radius: var(--hc-radius-control);
  background: none; color: var(--hc-assistant); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.as-action:hover { background: color-mix(in srgb, var(--hc-assistant) 12%, transparent); }

/* HC-301. The source line is not decoration: it is the claim that the answer came from somewhere
   and can be checked. It is always rendered, and an answer without one says so rather than
   quietly omitting it. */
.as-source { font-size: 13px; color: var(--hc-text-muted); }
.as-source a { color: var(--hc-assistant); text-decoration: none; }
.as-source--none { font-style: italic; }

.as-suggest-label { font-family: var(--hc-font-label); font-size: var(--hc-label-size); font-weight: var(--hc-weight-label); letter-spacing: var(--hc-label-track); text-transform: uppercase; color: var(--hc-text-muted); }
.as-suggest { display: grid; gap: var(--hc-2); }
.as-suggest button {
  text-align: left; width: 100%; min-height: 44px; padding: var(--hc-3) var(--hc-4);
  border: 1px solid var(--hc-border); border-radius: var(--hc-radius-control);
  background: var(--hc-surface-2); color: var(--hc-text); font: inherit; font-size: 14px; cursor: pointer;
}
.as-suggest button:hover { border-color: var(--hc-assistant); }
/* The landscape band has no room for a suggestion list and the document does not draw one there. */
@media (min-width: 600px) and (max-width: 1023px), (max-height: 499px) and (orientation: landscape) {
  .as-suggest, .as-suggest-label { display: none; }
}

.as-compose { border-top: 1px solid var(--hc-border); padding: var(--hc-4) var(--hc-5); display: flex; gap: var(--hc-2); }
.as-compose .hc-input { flex: 1 1 auto; }
.as-send {
  min-width: 52px; min-height: 52px; border-radius: var(--hc-radius-control);
  border: 0; background: var(--hc-assistant); color: var(--hc-on-accent); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* The nav control that opens it. Cyan, and the only cyan on the page. */
.as-topbar { display: flex; align-items: center; gap: var(--hc-4); padding: var(--hc-3) var(--hc-pad); border-bottom: 1px solid var(--hc-border); }
.as-topbar .as-ask { margin-left: auto; }
.as-hero h1 { font-family: var(--hc-font-display); font-size: var(--hc-h1); line-height: 1.05; }
.as-hero p { color: var(--hc-text-muted); font-size: 16px; margin-top: var(--hc-4); max-width: 60ch; }
.as-heroimg {
  margin-top: var(--hc-6); min-height: 200px; border: 1px dashed var(--hc-border);
  border-radius: var(--hc-radius-card); background: var(--hc-surface-1);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--hc-text-muted); font-size: 13px; padding: var(--hc-5);
}
.as-heroactions { display: flex; flex-wrap: wrap; gap: var(--hc-3); margin-top: var(--hc-6); }
.as-heroactions .hc-btn { width: auto; }