/* The chips in the question box, their popovers, the sources picker and the search settings panel. (.ctrls is in
 * composer.css, which owns the row they sit in.) */

/* M3's assist chip as a pill, at 40px so it lines up with the Fast/Deep segmented button beside it. */
.pill {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; max-width:250px;
  height:40px; padding-inline:16px 12px; border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-full);
  background:transparent; color:var(--md-on-surface);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track); white-space:nowrap;
}
.pill:has(> .ic:first-child) { padding-inline-start:12px; }
.pill:hover { background-image:var(--md-hover-layer); }
.pill:active { background-image:var(--md-press-layer); }
.pill[aria-expanded="true"] {
  border-color:transparent; background-color:var(--md-secondary-container); color:var(--md-on-secondary-container);
}
.pill:disabled {
  border-color:var(--md-disabled-container); background-image:none; color:var(--md-disabled-content); cursor:not-allowed;
}
.pill span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill span:empty { display:none; }   /* Sources has no label until the config says how many: no gap held for it */
.pill > .ic { font-size:18px; color:var(--md-primary); }
.pill:disabled > .ic { color:inherit; }
.pill .chev { font-size:18px; color:var(--md-on-surface-variant); }

/* ---------- popovers: M3's menu ---------- */
.pop {
  position:absolute; bottom:calc(100% + 8px); inset-inline-start:0; z-index:40;
  min-width:280px; max-width:min(440px, 92vw); padding:4px 0;
  background:var(--md-surface-container-low); border-radius:var(--md-shape-lg); box-shadow:var(--md-elev-2);
  display:flex; flex-direction:column;
}
.pop[hidden] { display:none; }        /* .pop sets display, so [hidden] must be said explicitly */
#modelPop { max-height:min(60vh, 520px); overflow-y:auto; }   /* every model the probe found can be a long list */
.pop-head { padding:12px 16px 8px; font:var(--md-title-small); color:var(--md-on-surface-variant); }
/* An item is a 44px row inset 4px from the menu's edge; the chosen one is filled, with rounder corners. */
/* flex-shrink:0 because the menu scrolls: with a min-height set, a flex item may otherwise be squeezed to it, and an
 * item with a two-line note then runs into the next one */
.pop-item {
  flex-shrink:0; display:flex; align-items:center; gap:12px; width:auto; min-height:44px; margin-inline:4px; padding:10px 12px;
  text-align:start; cursor:pointer; border:0; border-radius:var(--md-shape-xs); background:transparent;
  color:var(--md-on-surface);
}
.pop-item:hover { background-image:var(--md-hover-layer); }
.pop-item:active { background-image:var(--md-press-layer); }
.pop-item:focus-visible { outline-offset:-3px; }
.pop-item.on {
  border-radius:var(--md-shape-md); background-color:var(--md-secondary-container); color:var(--md-on-secondary-container);
}
.pop-item .txt { flex:1; min-width:0; }
.pop-item .name { font:var(--md-label-large); letter-spacing:var(--md-label-large-track); }
.pop-item .note { display:block; margin-top:2px; font:var(--md-body-small); color:var(--md-on-surface-variant); }
.pop-item.on .note { color:inherit; }
.pop-item .tick { flex:0 0 auto; width:16px; color:inherit; visibility:hidden; }
.pop-item.on .tick { visibility:visible; }

/* ---------- the sources picker, and the other panels: rounder, like M3's dialogs ---------- */
.pop-tools { display:flex; align-items:center; gap:4px; padding:4px 4px 8px; }
/* a filled search field, as a pill */
.pop-tools input {
  flex:1; min-width:0; height:40px; padding-inline:16px; border:0; border-radius:var(--md-shape-full); outline:none;
  background:var(--md-surface-container-highest); color:var(--md-on-surface); font:var(--md-body-medium);
}
.pop-tools input:focus-visible { outline:2px solid var(--md-primary); outline-offset:-2px; }
/* All and Clear: M3's text buttons */
.pop-tools button {
  cursor:pointer; height:40px; padding-inline:12px; border:0; border-radius:var(--md-shape-full); background:transparent;
  color:var(--md-primary); font:var(--md-label-large); letter-spacing:var(--md-label-large-track); white-space:nowrap;
}
.pop-tools button:hover { background-image:var(--md-hover-layer); }
.pop-list { overflow-y:auto; max-height:294px; padding:0 0 4px; }
.pop-list label {
  display:flex; align-items:center; gap:12px; cursor:pointer; min-height:40px; padding:8px 12px;
  border-radius:var(--md-shape-md); font:var(--md-body-medium); color:var(--md-on-surface);
}
.pop-list label:hover { background-image:var(--md-hover-layer); }
.pop-list input { accent-color:var(--md-primary); width:18px; height:18px; flex:0 0 auto; }
.pop-list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pop-foot {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:4px; padding-block:12px 4px; padding-inline:12px 4px; border-top:1px solid var(--md-outline-variant);
  font:var(--md-body-small); color:var(--md-on-surface-variant);
}
/* Done: M3's filled button */
.pop-foot button {
  cursor:pointer; height:40px; padding-inline:24px; border:0; border-radius:var(--md-shape-full);
  background-color:var(--md-primary); color:var(--md-on-primary);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.pop-foot button:hover { background-image:var(--md-hover-layer); }
.pop-foot button:active { background-image:var(--md-press-layer); }

/* ---------- search settings (developer view: restyled in the palette, not redesigned) ---------- */
.pop-settings { width:min(460px, 94vw); max-height:min(70vh, 640px); overflow-y:auto; padding:8px; border-radius:var(--md-shape-xl); }
.set-sec { padding:4px 12px 12px; border-top:1px solid var(--md-outline-variant); }
.set-sec:first-of-type { border-top:0; }
.set-sec h4 { margin:8px 0 6px; font:var(--md-title-small); color:var(--md-on-surface-variant); }
.set-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0;
  font:var(--md-body-medium); color:var(--md-on-surface);
}
.set-row .lbl { min-width:0; }
.set-row .lbl small { display:block; font:var(--md-body-small); color:var(--md-on-surface-variant); }
.set-row input[type=checkbox] { accent-color:var(--md-primary); width:18px; height:18px; flex:0 0 auto; }
.seg { display:inline-flex; flex:0 0 auto; gap:2px; padding:2px; border:1px solid var(--md-outline); border-radius:var(--md-shape-full); }
.seg button {
  cursor:pointer; padding:4px 10px; border:0; border-radius:var(--md-shape-full); background:transparent;
  color:var(--md-on-surface); font:var(--md-label-medium);
}
.seg button:hover { background-image:var(--md-hover-layer); }
.seg button.on { background-color:var(--md-secondary-container); color:var(--md-on-secondary-container); }
/* M3's outlined text field, small */
.set-in {
  width:100%; height:32px; padding:0 10px; border:1px solid var(--md-outline); border-radius:var(--md-shape-xs);
  background:transparent; color:var(--md-on-surface); font:var(--md-body-medium); outline:none;
}
.set-in:focus { border-color:var(--md-primary); box-shadow:inset 0 0 0 1px var(--md-primary); }
textarea.set-in { height:auto; min-height:56px; padding:6px 10px; resize:vertical; }
input.set-in[type=number] { width:72px; flex:0 0 auto; }
.set-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.set-note { margin-top:5px; font:var(--md-body-small); color:var(--md-on-surface-variant); }
.set-actions { display:flex; gap:8px; padding-top:8px; }
.set-actions button {
  cursor:pointer; height:32px; padding-inline:12px; border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-full);
  background:transparent; color:var(--md-primary); font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.set-actions button:hover { background-image:var(--md-hover-layer); }

/* On a phone the box's controls fit one row once the chips lose their caret, which only repeats that they open a
 * menu; the send button then stays beside them instead of floating between two rows. */
@media (max-width: 480px) {
  .pill .chev { display:none; }
}
/* iPhone Safari zooms the whole page into a field set smaller than 16px as soon as it is tapped, and stays zoomed */
@media (hover: none) and (pointer: coarse) {
  .pop-tools input, .set-in { font-size:16px; }
}