/* The chat bar's tools sheet (src/ui/action-pickers.mjs): docked on the bar,
   four tabs over its list; Abilities, Skills and Items one line a row, the
   name opening its details, + adding it to the action; Narrator the
   narrator's options. */
.tools-sheet{position:absolute;left:0;right:0;bottom:100%;z-index:12;max-height:min(62vh,520px);display:flex;flex-direction:column;border:1px solid var(--accent-850);border-bottom:0;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;background:var(--surface);box-shadow:0 -12px 28px rgb(var(--black-rgb) / .55)}
.tools-sheet[hidden]{display:none}
.tools-tabs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);padding:14px 12px 10px}
.tools-tabs button{min-width:0;height:44px;padding:0 4px;border:1px solid var(--stone-750);border-radius:var(--radius-pill);background:var(--surface-low);color:var(--text-soft);font:500 var(--size-label) var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools-tabs button[aria-selected=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}
.tools-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.tools-panel[hidden]{display:none}
.picker-list{padding-bottom:8px}
.picker-group{margin:0;padding:14px 18px 6px;border-top:1px solid var(--stone-850);color:var(--muted);font:600 var(--size-caption) var(--head);letter-spacing:.12em;text-transform:uppercase}
.picker-row{border-top:1px solid var(--stone-850)}
.picker-line{display:flex;align-items:center;gap:var(--space-2);min-height:56px;padding:0 10px 0 6px}
.picker-name{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-5);min-height:52px;padding:0 8px;border:0;border-radius:var(--radius-md);background:none;color:var(--text);text-align:left;cursor:pointer}
.picker-name:hover,.picker-name:focus-visible{background:var(--accent-950)}
.picker-name b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 var(--size-body) var(--head)}
.picker-chevron{flex:none;font-size:20px;color:var(--muted);transition:transform .15s}
.picker-name[aria-expanded="true"] .picker-chevron{transform:rotate(90deg)}
.picker-school{flex:none;font-size:15px;color:var(--mana-icon)}
.picker-pill{flex:none;padding:2px 8px;border-radius:var(--radius-md);background:var(--accent-900);color:var(--accent-300);font:600 var(--size-label) var(--head);font-variant-numeric:tabular-nums}
.picker-add{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--accent-700);border-radius:var(--radius-round);background:var(--surface-warm);color:var(--accent);cursor:pointer}
.picker-add:hover,.picker-add:focus-visible{background:var(--accent-900)}
.picker-add .material-symbols-outlined{font-size:22px}
/* Cooling down: the turns left beside an hourglass; short of a pool: its price. Either greys the row. */
.picker-wait,.picker-short{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;height:32px;box-sizing:border-box;padding:0 11px 0 9px;border:1px solid var(--stone-800);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--text-soft);font:600 var(--size-ui) var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.picker-short{padding:0 11px;color:var(--text-dim);font-weight:500}
.picker-wait .material-symbols-outlined{font-size:18px;color:var(--accent-450)}
.picker-row.greyed .picker-name b{color:var(--stone-500)}
.picker-row.greyed .picker-pill{background:var(--surface-raised);color:var(--stone-500)}
.picker-row.greyed .picker-chevron{color:var(--disabled)}
.picker-detail{padding:0 18px 16px 42px}
.picker-detail[hidden]{display:none}
.picker-detail p{margin:0 0 10px;color:var(--text-soft);font:400 var(--size-small)/1.5 var(--head)}
.picker-facts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0;padding:0;list-style:none}
.picker-facts li{padding:4px 10px;border:1px solid var(--stone-800);border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--text-soft);font:400 var(--size-label) var(--head)}
.tools-panel .empty{margin:0;padding:4px 18px 18px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.picker-chevron{transition:none}}