/* Feedback lab controls (feedback-modes-ui.js). Nothing here matches unless a lab mode is switched on. */

.fl-control {
    margin: 4px 0 18px;
    padding: 0 8px 0 19px;   /* lines up with paragraph text (.paragraph pads 16px + 3px number gutter) */
    font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
    font-size: 14px;
    color: var(--color-text-secondary, #4B5563);
}

/* Quiet until touched: the rows sit under the text without pulling the eye. */
.fl-tap, .fl-rating { opacity: 0.9; transition: opacity 0.2s ease; }
.fl-tap:hover, .fl-tap:focus-within, .fl-tap.fl-engaged,
.fl-rating:hover, .fl-rating:focus-within, .fl-rating.fl-engaged { opacity: 1; }

.fl-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 340px; }   /* 2x2: no lone wrapped chip */
.fl-chip, .fl-num, .fl-face, .fl-btn {
    min-height: 44px;
    border: 1px solid var(--color-border, #E5E7EB);
    background: var(--color-bg-elevated, #fff);
    color: var(--color-text, #1a1a1a);
    border-radius: 18px;
    font: inherit;
    cursor: pointer;
}
.fl-chip { padding: 4px 11px; font-size: 13px; }
.fl-chip-emoji { font-size: 16px; }
.fl-chip[aria-pressed="true"], .fl-num[aria-pressed="true"], .fl-face[aria-pressed="true"] {
    border-color: var(--color-primary, #7C5E3C);
    background: var(--color-primary-subtle, rgba(124, 94, 60, 0.08));
    font-weight: 600;
}

.fl-question { font-weight: 600; color: var(--color-text, #1a1a1a); }
.fl-rating .fl-question { margin-bottom: 6px; }
.fl-scale { display: grid; gap: 4px; }
.fl-scale-5 { grid-template-columns: repeat(5, 1fr); }
.fl-scale-10 { grid-template-columns: repeat(5, 1fr); }   /* two rows of five keeps 44px targets */
.fl-num { min-width: 0; padding: 0; border-radius: 8px; }
.fl-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--color-text-secondary, #4B5563); }

.fl-checkin {
    margin-left: 19px; margin-right: 8px;
    padding: 14px;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 14px;
    background: var(--color-bg-subtle, #F3F4F6);
}
.fl-checkin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fl-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fl-face { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; }
.fl-face-emoji { font-size: 22px; line-height: 1.2; }
.fl-face-label { font-size: 13px; color: var(--color-text, #1a1a1a); }

.fl-x {
    width: 44px; height: 44px; border: 0; background: transparent;
    color: var(--color-text-muted, #6B7280); font-size: 16px; cursor: pointer; border-radius: 18px;
}
.fl-link {
    border: 0; background: transparent; padding: 0 4px; min-height: 44px; font: inherit; font-size: 13px;
    color: var(--color-primary, #7C5E3C); text-decoration: underline; cursor: pointer;
}
.fl-stop { display: block; margin-top: 8px; }
.fl-skip { color: var(--color-text-secondary, #4B5563); }

.fl-saymore { margin-top: 10px; }
.fl-saymore-collapsed { margin-top: 2px; }
.fl-saymore-label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--color-text, #1a1a1a); }
.fl-saymore-text {
    width: 100%; box-sizing: border-box; padding: 8px 10px; resize: vertical;
    border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px;
    background: var(--color-bg-elevated, #fff); color: var(--color-text, #1a1a1a);
    font: inherit; font-size: 16px; /* 16px keeps iOS from zooming on focus */
}
.fl-saymore-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fl-btn { padding: 4px 16px; }
.fl-btn-primary {
    background: var(--color-primary, #7C5E3C); border-color: var(--color-primary, #7C5E3C);
    color: var(--color-text-inverse, #fff); font-weight: 600;
}
.fl-btn:disabled { opacity: 0.5; cursor: default; }
.fl-done { opacity: 0.6; }

/* Talk: a round mic floating above the bottom bar, right side; it borrows .btn-ask's look. */
.btn-talk {
    position: fixed; right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-bottom, 100);   /* same layer as the bottom bar, so open sheets cover it */
    width: 52px; height: 52px; min-width: 52px; padding: 0;
    border-radius: 26px; font-size: 22px;
}

body.fl-busy .btn-talk { display: none; }

.fl-recorder {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 1001; max-width: 520px; margin: 0 auto;
    padding: 14px 16px 16px; border-radius: 16px;
    background: var(--color-bg-elevated, #fff); color: var(--color-text, #1a1a1a);
    border: 1px solid var(--color-border, #E5E7EB);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    font-family: var(--font-ui, system-ui, -apple-system, sans-serif); font-size: 14px;
}
.fl-recorder [hidden] { display: none !important; }
.fl-rec-head { display: flex; align-items: center; gap: 10px; }
.fl-rec-head strong { flex: 1; font-size: 16px; }
.fl-recorder[data-state="idle"] .fl-rec-time, .fl-recorder[data-state="starting"] .fl-rec-time { visibility: hidden; }
.fl-rec-time { font-variant-numeric: tabular-nums; color: var(--color-text-secondary, #4B5563); }
.fl-rec-warn .fl-rec-time { color: #B91C1C; font-weight: 700; }
.fl-rec-about { margin: 6px 0 12px; color: var(--color-text-secondary, #4B5563); font-style: italic; }
.fl-rec-main {
    display: block; margin: 0 auto 10px; width: 64px; height: 64px; border-radius: 32px;
    border: 3px solid var(--color-border, #E5E7EB); background: var(--color-bg-elevated, #fff); cursor: pointer;
}
.fl-rec-dot { display: block; width: 26px; height: 26px; margin: auto; border-radius: 13px; background: #DC2626; }
.fl-recorder[data-state="recording"] .fl-rec-dot { width: 22px; height: 22px; border-radius: 4px; animation: fl-pulse 1.2s ease-in-out infinite; }
.fl-recorder[data-state="starting"] .fl-rec-main { opacity: 0.5; }
.fl-rec-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.fl-rec-status { text-align: center; color: var(--color-text-secondary, #4B5563); }
@keyframes fl-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .fl-recorder[data-state="recording"] .fl-rec-dot { animation: none; } }

.fl-settings .fl-set-hint { margin: 0 0 8px; font-size: 13px; color: var(--color-text-muted, #6B7280); }
.fl-settings .fl-set-group { margin-top: 16px; }
.fl-set-mode .you-row-label { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fl-set-mode .toggle-switch { flex-shrink: 0; }
.fl-set-sub { font-size: 12px; color: var(--color-text-muted, #6B7280); font-weight: 400; }
.fl-set-row { padding: var(--space-1, 4px) 0; }