/* ── Agent Lab ──────────────────────────────────────────────────────────── */

/* Launcher panel inside command centre card */
.agent-lab-launcher   { margin-top: 16px; }
.al-empty-msg         { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
.al-character-card    { background: var(--bg); border: 1px solid var(--border-active, var(--cyan)); border-radius: 8px; padding: 14px 16px; }
.al-character-card strong { color: var(--light); }
.al-character-card p  { font-size: .8rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* Buttons */
.al-btn               { padding: 8px 20px; font-size: .8rem; letter-spacing: .05em; cursor: pointer; border-radius: 0; transition: opacity .15s; }
.al-btn--primary      { background: var(--cyan); color: #000; border: none; font-weight: 600; }
.al-btn--secondary    { background: transparent; border: 1px solid var(--cyan); color: var(--cyan); }
.al-btn--ghost        { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.al-btn:hover         { opacity: .85; }
.al-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Modal overlay */
.al-modal-overlay     { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.al-modal             { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; }
.al-modal-header      { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; }
.al-modal-title       { font-family: var(--font-heading); font-size: 1.1rem; color: var(--light); }
.al-modal-close       { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px; }
.al-modal-close:hover { color: var(--light); }

/* Step indicators */
.al-steps             { display: flex; gap: 8px; padding: 16px 24px; }
.al-step              { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); font-size: .75rem; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.al-step.active       { border-color: var(--cyan); color: var(--cyan); background: rgba(0,255,247,.08); }
.al-step.done         { border-color: var(--cyan); background: var(--cyan); color: #000; }

/* Panels */
.al-panel             { padding: 8px 24px 20px; flex: 1; }
.al-panel-title       { font-size: 1rem; color: var(--light); margin-bottom: 20px; font-weight: 600; }
.al-optional          { font-size: .75rem; color: var(--muted); font-weight: 400; }

/* Purpose tiles */
.al-tiles             { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.al-tile              { padding: 8px 16px; font-size: .8rem; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; border-radius: 0; transition: all .15s; }
.al-tile:hover,
.al-tile.selected     { border-color: var(--cyan); color: var(--cyan); }

/* Inputs */
.al-input             { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; color: var(--light); font-size: .875rem; font-family: inherit; }
.al-input:focus       { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
.al-textarea          { min-height: 120px; resize: vertical; }
.al-field             { margin-bottom: 16px; }
.al-label             { display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }

/* Sliders */
.al-slider-group      { margin-bottom: 20px; }
.al-slider-labels     { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.al-slider-group input[type=range] { width: 100%; accent-color: var(--cyan); }

/* Generating / preview */
.al-generating        { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 0; color: var(--muted); font-size: .875rem; }
.al-spinner           { width: 32px; height: 32px; border: 2px solid var(--border); border-top-color: var(--cyan); border-radius: 50%; animation: al-spin .8s linear infinite; }
@keyframes al-spin    { to { transform: rotate(360deg); } }
.al-preview-name      { font-family: var(--font-heading); font-size: 1.4rem; color: var(--light); margin-bottom: 12px; }
.al-preview-backstory { font-size: .875rem; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }
.al-preview-voice     { font-size: .8rem; color: var(--cyan); font-style: italic; }

/* Footer */
.al-modal-footer      { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }