/* ==========================================================================
   DealerOS Assistant (Beta): the panel.
   Loaded after app.css and built only from its tokens and components (the grey
   panel head, the chip, the button, the house table). Every rule begins .as- ;
   no new hue, no gradient, no radius above the system's, one shadow (the overlay).
   ========================================================================== */

/* ---- the header button: quiet, beside the language switch ---------------- */
.as-open{
  appearance:none; display:inline-flex; align-items:center; gap:var(--sp-2);
  height:26px; padding:0 var(--sp-1) 0 var(--sp-3); cursor:pointer; white-space:nowrap;
  font:inherit; font-size:var(--fs-micro); color:var(--c-text);
  background:var(--c-ground);
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm);
}
.as-open[hidden]{ display:none; }
.as-open:hover{ background:var(--n-50); border-color:var(--c-border-strong); }
.as-open[aria-expanded="true"]{ background:var(--n-100); font-weight:var(--fw-semibold); }
.as-open:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset); }
.as-beta{ height:18px; }

/* ---- the panel: at the right, under the header ---------------------------
   From 1440 px the page narrows beside it and nothing is covered. Below that it
   lies over the right of the page, with the one overlay shadow. */
.as-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:50;
  width:420px; max-width:100vw;
  display:flex; flex-direction:column;
  background:var(--c-ground);
  border-left:var(--bw-hair) solid var(--c-border);
  box-shadow:var(--shadow-overlay);
}
.as-panel[hidden]{ display:none; }
.as-on .store-bar{ margin-right:420px; }
@media (min-width:1440px){
  .as-panel{ box-shadow:none; }
  .as-on .app-main{ max-width:min(1560px, calc(100% - 420px)); }
  .as-on .app-footer{ margin-right:420px; }
}
/* Beside the open panel the page is as wide as a window of 1020 to 1100 px: it takes the
   layout the page already has for that width (app.css, max-width:1100px). */
@media (min-width:1440px) and (max-width:1520px){
  .as-on .split, .as-on .donut-pair{ grid-template-columns:1fr; }
  .as-on .enq-grid:not(.enq-grid--1){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.as-head{ flex:0 0 auto; align-items:center; gap:var(--sp-2);
          padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); }
.as-title{ white-space:nowrap; }
.as-close{
  appearance:none; margin-left:auto; width:24px; height:24px; padding:0; cursor:pointer;
  border:0; border-radius:var(--r-sm); background:none;
  color:var(--n-0); font:inherit; font-size:var(--fs-compact); line-height:1;
}
.as-close:hover{ background:var(--n-700); }
.as-close:focus-visible{ outline:var(--focus-w) solid var(--n-0); outline-offset:-2px; }

.as-body{ position:relative; flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto;
          padding:var(--sp-4) var(--sp-3); }

/* ---- the empty panel is the guide ---------------------------------------- */
/* Short lines of Japanese break between phrases, not inside one (回答し / ます). */
.as-lede, .as-starter, .as-q{ word-break:auto-phrase; }
.as-lede{ margin:0 0 var(--sp-4); color:var(--c-text-secondary); line-height:var(--lh-prose);
          text-wrap:balance; }
.as-starters{ display:flex; flex-direction:column; gap:var(--sp-2); }
.as-starter{
  appearance:none; display:block; width:100%; cursor:pointer;
  padding:var(--sp-2) var(--sp-3); text-align:left; white-space:normal; text-wrap:balance;
  font:inherit; font-size:var(--fs-body); line-height:var(--lh-prose); color:var(--c-text);
  background:var(--c-ground);
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm);
}
.as-starter:hover{ background:var(--n-50); border-color:var(--c-border-strong); }
.as-starter:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset); }

/* ---- one question: the question, the reads, the answer, the sources ------ */
.as-turn + .as-turn{ margin-top:var(--sp-4); padding-top:var(--sp-4);
                     border-top:var(--bw-hair) solid var(--c-divider); }
.as-q{ margin:0 0 var(--sp-2); font-weight:var(--fw-semibold); line-height:var(--lh-prose);
       overflow-wrap:break-word; white-space:pre-wrap; }

.as-steps{ list-style:none; margin:0 0 var(--sp-2); padding:0;
           font-size:var(--fs-compact); color:var(--c-text-secondary); }
.as-step{ display:flex; align-items:center; gap:var(--sp-2); min-height:22px; }
.as-step--failed{ color:var(--c-attention); }
.as-mark{ flex:0 0 13px; text-align:center; font-size:11px; line-height:1; }
.as-sec{ margin-left:auto; font-variant-numeric:tabular-nums lining-nums; }
.as-reads{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
           margin:0 0 var(--sp-2); font-size:var(--fs-micro); color:var(--c-text-secondary); }

.as-answer{ line-height:var(--lh-prose); overflow-wrap:break-word; }
.as-answer p{ margin:0 0 var(--sp-2); }
.as-answer ul{ margin:0 0 var(--sp-2); padding-left:18px; }
.as-answer li + li{ margin-top:2px; }
.as-tbl{ margin:0 0 var(--sp-2); }
.as-tbl table{ font-size:var(--fs-micro); line-height:var(--lh-dense); }
.as-tbl th, .as-tbl td{ padding:var(--sp-1) var(--sp-2); }
.as-tbl th{ white-space:normal; }

/* a source is a chip that opens its screen */
.as-sources{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-2); }
.as-src{ appearance:none; font-family:inherit; cursor:pointer; }
.as-src:hover{ background:var(--c-ground); text-decoration:underline; text-underline-offset:2px; }
.as-src:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset); }

.as-fail{ margin-bottom:var(--sp-2); }
.as-retry{ margin-bottom:var(--sp-1); }

/* ---- the question box ---------------------------------------------------- */
.as-foot{ flex:0 0 auto; padding:var(--sp-3);
          border-top:var(--bw-hair) solid var(--c-divider); background:var(--c-surface-alt); }
.as-box{
  display:block; width:100%; min-height:56px; max-height:160px; resize:none;
  padding:var(--sp-2) var(--sp-3);
  font:inherit; font-size:var(--fs-body); line-height:var(--lh-prose); color:var(--c-text);
  background:var(--c-ground);
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm);
}
.as-box::placeholder{ color:var(--c-text-secondary); opacity:1; }
.as-box:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset);
                       border-color:var(--c-border-strong); }
.as-foot-row{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2); }
.as-new{ font-size:var(--fs-micro); }
.as-new:disabled{ color:var(--c-text-disabled); text-decoration:none; cursor:default; }
.as-send{ margin-left:auto; }