/* Pharmacy-Xpress Assistant panel.

     One form root owns three surfaces: the desktop command bar,
     the mobile navigation icon and the right-hand drawer. Only the
     mobile icon sits in the navigation rail's own flow; the bar, the
     drawer and the voice call bar are fixed, so the rail contributes no
     button space on desktop. The form sits in the rail's slot, so while
     the panel runs those three live in .pa-layer under <body>
     (assistant_panel.mjs), out of reach of the rail's !important rules
     in main/shell.css.

     Layering (J5, blueprint G). The portal's shared tokens are read,
     never redefined: dropdown 100, sticky 200, modal 300, overlay 400,
     toast 500 in --ch-z-*. Order: sticky headers < command bar <
     drawer < dialogs, pop-ups and toasts.

       command bar  200  page furniture; a pop-up covers it
       drawer       250  above sticky, BELOW the pop-up layer at 300
       call bar    9998  above page pop-ups; below the offline banner
                         9999, Training's loading overlay 10001, px
                         alerts 10010+, portal toasts 99999 and
                         the session-expired overlay (max)

     The call bar is the one surface deliberately above the pop-up
     layer. A connected call bills every minute, and a full-window
     pop-up covering Hang up is what left a call running and charging
     with nobody attending it. Nothing else here goes above 300. */

  .pa-root, .pa-layer { font-family: var(--ch-font-primary); }
  .pa-layer { color: var(--ch-text-primary); }

  /* `hidden` beats every display rule in this sheet. The drawer, the
     call bar and Stop are each `display: flex`, which outranks the user
     agent's own `[hidden] { display: none }`, so all three were painted
     at all times whatever the state said - the drawer sat over the page
     while closed, Hang up showed with no call, Stop showed with no
     reply running. */
  .pa-root [hidden], .pa-layer [hidden] { display: none !important; }

  /* ---------- mobile navigation icon (in the rail's own flow) ------ */
  .pa-mobile-entry {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--ch-text-secondary);
    font-family: var(--ch-font-primary);
    font-size: 10px;
    padding: 6px 0;
    width: 100%;
    min-height: 44px;
    cursor: pointer;
  }
  .pa-mobile-entry .pa-icon { font-size: 22px; }

  /* ---------- desktop command bar ---------------------------------- */
  .pa-bar {
    position: fixed;
    top: 10px;
    z-index: var(--ch-z-sticky, 200);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .pa-bar-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(520px, 100%);
    padding: 4px 6px 4px 14px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-full);
    background: var(--ch-bg-input);
    box-shadow: var(--ch-shadow-sm);
  }
  .pa-bar-inner input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--ch-font-primary);
    font-size: 13px;
    color: var(--ch-text-primary);
    padding: 8px 0;
  }
  .pa-bar-inner input:focus { outline: none; }

  /* ---------- voice call bar --------------------------------------- */
  .pa-callbar {
    position: fixed;
    top: 10px;
    right: 16px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 14px;
    border-radius: var(--ch-radius-full);
    background: var(--ch-accent-secondary);
    color: var(--ch-accent-primary-text);
    box-shadow: var(--ch-shadow-md);
    font-size: 12px;
    font-weight: 600;
  }

  /* ---------- drawer ----------------------------------------------- */
  .pa-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    z-index: 250;
    display: flex;
    flex-direction: column;
    background: var(--ch-bg-card);
    border-left: 1px solid var(--ch-border);
    box-shadow: -12px 0 38px var(--ch-bg-overlay);
  }
  .pa-head {
    padding: 18px 16px 10px;
    border-bottom: 1px solid var(--ch-border);
  }
  .pa-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .pa-head h2 {
    font-size: 16px;
    margin: 0;
    color: var(--ch-text-primary);
  }
  .pa-head-actions { display: flex; gap: 2px; }
  .pa-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px 18px 14px;
  }
  .pa-allowance {
    padding: 10px 18px;
    border-top: 1px solid var(--ch-border);
    background: var(--ch-bg-primary);
    font-size: 11px;
    color: var(--ch-text-secondary);
  }
  .pa-allowance div + div, .pa-tip div + div { margin-top: 4px; }

  /* ---------- allowance info icon (D45) ---------------------------- */
  /* A small persistent `i` at the foot of the drawer. It replaces the
     percentage line the drawer used to print under every answer, which
     filled half the screen in a long conversation. The row is OUTSIDE
     the composer because the icon persists when the composer does not:
     a user whose homes are all exhausted still gets to see why. */
  .pa-foot {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 6px 14px 8px;
    background: var(--ch-bg-card);
  }
  .pa-info-btn { width: 26px; height: 26px; }
  .pa-info-btn .pa-icon { font-size: 17px; }
  .pa-tip {
    position: absolute;
    right: 12px;
    bottom: 100%;
    max-width: 260px;
    padding: 9px 11px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md);
    background: var(--ch-bg-primary);
    box-shadow: 0 6px 18px var(--ch-bg-overlay);
    font-size: 11px;
    line-height: 1.5;
    color: var(--ch-text-secondary);
  }
  .pa-composer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--ch-border);
    background: var(--ch-bg-card);
  }
  .pa-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md);
    padding: 6px;
    background: var(--ch-bg-input);
  }
  .pa-input-wrap textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    height: 42px;
    max-height: 110px;
    border: 0;
    background: transparent;
    font-family: var(--ch-font-primary);
    font-size: 13px;
    color: var(--ch-text-primary);
    padding: 9px 4px;
  }
  .pa-input-wrap textarea:focus { outline: none; }

  /* ---------- conversation ----------------------------------------- */
  .pa-msg { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--ch-text-primary); }
  .pa-msg p { margin: 0; }
  .pa-msg p + p { margin-top: 9px; }
  .pa-msg.user {
    background: var(--ch-bg-secondary);
    padding: 10px 13px;
    border-radius: 14px 14px 3px 14px;
    margin-left: 26px;
  }
  .pa-msg-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ch-text-secondary);
  }
  .pa-msg-label .pa-icon { font-size: 16px; color: var(--ch-accent-primary-text); }
  .pa-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--ch-radius-full);
    background: var(--ch-bg-secondary);
    color: var(--ch-text-secondary);
  }
  .pa-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: var(--ch-radius-md);
    padding: 10px 12px;
    margin: 10px 0;
    background: var(--ch-bg-secondary);
    color: var(--ch-text-secondary);
  }
  .pa-notice.warning { background: var(--ch-warning-bg); color: var(--ch-warning); }
  .pa-notice.error { background: var(--ch-danger-bg); color: var(--ch-danger-text); }
  .pa-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
  .pa-starter {
    text-align: left;
    font-family: var(--ch-font-primary);
    font-size: 12px;
    line-height: 1.4;
    padding: 10px;
    min-height: 58px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md);
    background: var(--ch-bg-card);
    color: var(--ch-text-primary);
    cursor: pointer;
  }
  .pa-welcome h3 { font-size: 20px; margin: 0 0 6px; color: var(--ch-text-primary); }
  .pa-welcome p { font-size: 13px; color: var(--ch-text-secondary); margin: 0; }
  .pa-card {
    border: 1px solid var(--ch-border);
    border-left: 3px solid var(--ch-accent-primary);
    border-radius: var(--ch-radius-md);
    padding: 14px;
    margin: 12px 0;
    background: var(--ch-bg-primary);
  }
  .pa-card h4 { margin: 0 0 6px; font-size: 14px; color: var(--ch-text-primary); }
  .pa-card p { font-size: 12px; color: var(--ch-text-secondary); margin: 0 0 6px; }
  .pa-card textarea {
    width: 100%;
    min-height: 120px;
    font-family: var(--ch-font-primary);
    font-size: 13px;
    margin: 10px 0;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-input);
    color: var(--ch-text-primary);
    padding: 8px;
  }
  .pa-preview {
    margin-top: 12px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md);
    padding: 13px;
  }
  .pa-preview h4 { margin: 0 0 2px; font-size: 13px; color: var(--ch-text-primary); }
  .pa-preview small { font-size: 11px; color: var(--ch-text-secondary); }
  .pa-plot { position: relative; height: 165px; width: 100%; margin-top: 10px; }
  .pa-plot canvas { max-width: 100%; }
  .pa-preview-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--ch-border);
    margin-top: 11px;
    padding-top: 9px;
  }
  .pa-table-scroll { overflow: auto; max-height: 240px; margin-top: 10px; }
  .pa-table-scroll table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .pa-table-scroll th, .pa-table-scroll td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--ch-border);
    color: var(--ch-text-primary);
  }
  .pa-caption { font-size: 11px; color: var(--ch-text-secondary); margin-top: 8px; }
  .pa-conv-list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px;
    margin-top: 8px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md);
    background: var(--ch-bg-card);
    color: var(--ch-text-primary);
    font-family: var(--ch-font-primary);
    font-size: 13px;
    cursor: pointer;
  }
  .pa-conv-list small { display: block; margin-top: 3px; font-size: 11px; color: var(--ch-text-secondary); }
  .pa-picker { margin-top: 10px; }
  .pa-picker select {
    width: 100%;
    padding: 8px;
    font-family: var(--ch-font-primary);
    font-size: 13px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-input);
    color: var(--ch-text-primary);
    margin-top: 6px;
  }
  .pa-voice-bars { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
  .pa-voice-bars i {
    display: block;
    width: 3px;
    border-radius: 3px;
    height: 8px;
    background: var(--ch-accent-primary);
    animation: pa-voice 900ms ease-in-out infinite alternate;
  }
  .pa-voice-bars i:nth-child(2n) { height: 18px; animation-delay: 300ms; }
  .pa-voice-bars i:nth-child(3n) { height: 13px; animation-delay: 500ms; }
  @keyframes pa-voice { to { height: 5px; } }
  .pa-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ch-text-secondary);
    margin: 8px 0 0;
  }
  /* The container stays in the DOM under a running reply and only its
     words change, so the polite live region is not rebuilt on every
     text part -- a region inserted together with its content is not
     announced. Nothing to say hides the row; it does not remove it. */
  .pa-progress.pa-progress-idle { display: none; }
  .pa-progress-dots { display: inline-flex; gap: 4px; }
  .pa-progress i {
    width: 5px;
    height: 5px;
    border-radius: var(--ch-radius-full);
    background: var(--ch-accent-primary-text);
    opacity: 0.3;
    animation: pa-think 900ms ease-in-out infinite alternate;
  }
  .pa-progress i:nth-child(2) { animation-delay: 200ms; }
  .pa-progress i:nth-child(3) { animation-delay: 400ms; }
  @keyframes pa-think { to { opacity: 1; } }
  /* ONE reduced-motion block for the panel: a second one is how the next
     animation added ends up honouring the setting only by accident. */
  @media (prefers-reduced-motion: reduce) {
    .pa-voice-bars i { animation: none; }
    .pa-progress i { animation: none; opacity: 0.6; }
  }

  /* ---------- buttons ---------------------------------------------- */
  .pa-btn {
    font-family: var(--ch-font-primary);
    font-size: 13px;
    padding: 8px 14px;
    min-height: 36px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-card);
    color: var(--ch-text-primary);
    cursor: pointer;
  }
  .pa-btn.primary {
    background: var(--ch-accent-primary);
    border-color: var(--ch-accent-primary);
    color: var(--ch-text-primary);
  }
  /* No one token is dark on the orange fill in both themes. */
  [data-theme="dark"] .pa-btn.primary { color: var(--ch-text-inverse); }
  .pa-btn.small { font-size: 12px; padding: 5px 10px; min-height: 30px; }
  .pa-icon-btn {
    border: 0;
    background: transparent;
    color: var(--ch-text-secondary);
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: var(--ch-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .pa-icon-btn:hover:not([disabled]) { background: var(--ch-accent-soft); }
  .pa-btn:hover:not([disabled]), .pa-starter:hover, .pa-conv-list button:hover {
    background: var(--ch-bg-secondary);
  }
  .pa-btn.primary:hover:not([disabled]) {
    background: var(--ch-accent-primary-hover);
    border-color: var(--ch-accent-primary-hover);
  }
  .pa-btn[disabled], .pa-icon-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    color: var(--ch-text-disabled);
  }
  .pa-btn:focus-visible, .pa-icon-btn:focus-visible,
  .pa-starter:focus-visible, .pa-mobile-entry:focus-visible {
    outline: 2px solid var(--ch-border-focus);
    outline-offset: 2px;
  }
  .pa-icon {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-size: 20px;
  }

  /* ---------- mobile ------------------------------------------------ */
  @media (max-width: 599px) {
    .pa-bar { display: none !important; }
    .pa-mobile-entry { display: flex; }
    .pa-drawer {
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%;
      border-left: 0;
      box-shadow: none;
    }
    .pa-starters { grid-template-columns: 1fr; }
    .pa-callbar { right: 10px; left: 10px; justify-content: center; }
  }