/* AI-Assisted Nomination Form ("Tui") styles.
   Base input/select/textarea/label/checkbox/submit styling comes from the
   shared design-system block printed by nomination_form.php (scoped to
   .formHolder and .nzotyAiFormWrapper) - this file only adds the pieces
   that are unique to the wizard (toggle tabs, chat, progress, mic controls). */

.nzotyFormToggle {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.nzotyFormToggleBtn {
    padding: 10px 18px;
    border: 2px solid var(--e-global-color-primary);
    background: transparent;
    color: var(--e-global-color-primary);
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
}

.nzotyFormToggleBtn.active {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text);
}

.nzotyAiFormWrapper {
    max-width: 720px;
}

#tuiStep2 {
    display: flex;
    flex-direction: column;
    min-height: min(70vh, 640px);
}

.tuiIntro {
    background: var(--e-global-color-text);
    border-left: 4px solid var(--e-global-color-primary);
    padding: 16px 20px;
    margin-bottom: 20px;
    color: var(--e-global-color-primary);
}

.tuiIntroTitle {
    font-weight: 700;
    margin-bottom: 6px;
}

.tuiProgress {
    margin-bottom: 16px;
    color: var(--e-global-color-primary);
}

.tuiProgressLabelRow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.95em;
}

#tuiProgressPercent {
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}

.tuiProgressBar {
    width: 100%;
    height: 8px;
    background: var(--e-global-color-text);
    border: 1px solid var(--e-global-color-primary);
    overflow: hidden;
    margin-top: 6px;
}

.tuiProgressBarFill {
    height: 100%;
    background: var(--e-global-color-primary);
    width: 0%;
    transition: width 0.45s ease;
}

/* Spacing only - borders, fonts, and colors for inputs/selects/textareas
   inside .nzotyAiFormWrapper already come from the shared design-system
   block, so every Tui field automatically matches the classic form. */
.tuiStep input,
.tuiStep select,
.tuiStep textarea {
    display: block;
    width: 100%;
    margin-bottom: 14px;
}

.tuiCategoryNote {
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 16px;
}

.tuiCategoryReview {
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--e-global-color-primary);
}

.tuiCategoryReviewNote {
    font-size: 14px;
    opacity: 0.85;
    margin: 4px 0 10px;
}

.tuiConsent {
    margin: 16px 0;
}

.tuiFormError {
    background: #fdeaea;
    border-left: 4px solid #b3261e;
    color: #7a1c15;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}

.tuiBtn {
    padding: 10px 18px;
    border: 2px solid var(--e-global-color-primary);
    background: transparent;
    color: var(--e-global-color-primary);
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    margin-right: 8px;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
}

/* Beat Hello Elementor reset (button:hover/focus → pink #cc3366). */
.tuiBtn:hover,
.tuiBtn:focus,
.tuiBtn:focus-visible,
.tuiBtn:active {
    background: transparent;
    color: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    opacity: 0.85;
    outline: none;
}

.tuiBtnPrimary,
.tuiBtn.tuiBtnPrimary {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text);
}

.tuiBtnPrimary:hover,
.tuiBtnPrimary:focus,
.tuiBtnPrimary:focus-visible,
.tuiBtnPrimary:active,
.tuiBtn.tuiBtnPrimary:hover,
.tuiBtn.tuiBtnPrimary:focus,
.tuiBtn.tuiBtnPrimary:focus-visible,
.tuiBtn.tuiBtnPrimary:active {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text);
    border-color: var(--e-global-color-primary);
    opacity: 0.9;
    outline: none;
}

.tuiBtn:disabled,
.tuiBtnPrimary:disabled,
.tuiBtn.tuiBtnPrimary:disabled {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text);
    border-color: var(--e-global-color-primary);
    opacity: 0.65;
    cursor: wait;
}

.tuiModeBtn.active {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text);
}

.tuiChatToolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    margin-bottom: 10px;
}

.tuiChatToolbar .tuiOrTypeLink {
    margin-top: 0;
    font-size: 13px;
}

.tuiChatWindow {
    max-height: calc(100vh - 320px);
    min-height: 220px;
    overflow-y: auto;
    padding: 20px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 51, 31, 0.15);
    margin-bottom: 0;
}

.tuiMessage {
    max-width: min(88%, 520px);
    padding: 12px 16px;
    margin-bottom: 14px;
    line-height: 1.45;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
}

.tuiMessage.tui {
    background: rgba(0, 51, 31, 0.04);
    border: none;
    border-left: 3px solid var(--e-global-color-primary);
    color: var(--e-global-color-primary);
    margin-right: auto;
}

.tuiMessage.tui .tuiMessageAuthor {
    font-weight: 700;
    color: var(--e-global-color-primary);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tuiMessage.user {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text);
    margin-left: auto;
}

.tuiMessage.thinking {
    font-style: italic;
    opacity: 0.7;
}

/* Quick-reply buttons (e.g. individual / duo / whānau) rendered inline in
   the chat window itself, rather than in the usual type-or-speak area. */
.tuiQuickReplies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tuiAnswerArea {
    position: sticky;
    bottom: 0;
    z-index: 20;
    border-top: none;
    padding: 14px 0 8px;
    margin-top: 0;
    background: var(--e-global-color-text);
}

#tuiCategoryPick {
    margin-bottom: 8px;
}

.tuiCategoryPickLabel {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--e-global-color-primary);
}

#tuiCategoryPick select {
    margin-bottom: 12px;
}

#tuiTypeInput textarea {
    margin-bottom: 10px;
}

#socialMediaContainerAi .social-url-entry,
#additionalReadingContainerAi .reading-url-entry {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

#socialMediaContainerAi .social-url-entry input,
#additionalReadingContainerAi .reading-url-entry input {
    margin-bottom: 0;
    flex: 1;
}

#addSocialBtnAi,
#addReadingBtnAi {
    margin-top: 4px;
    margin-bottom: 16px;
}

#tuiVoiceInput {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tuiHoldToSpeakBtn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    min-width: 180px;
}

.tuiHoldToSpeakBtn:hover,
.tuiHoldToSpeakBtn:focus,
.tuiHoldToSpeakBtn:focus-visible,
.tuiHoldToSpeakBtn:active {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text);
    border-color: var(--e-global-color-primary);
    opacity: 0.9;
    outline: none;
}

.tuiHoldToSpeakBtn.recording,
.tuiHoldToSpeakBtn.recording:hover,
.tuiHoldToSpeakBtn.recording:focus,
.tuiHoldToSpeakBtn.recording:active {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
    opacity: 1;
    animation: tuiRecordingPulse 1.4s ease-in-out infinite;
}

@keyframes tuiRecordingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#tuiRecordTimer {
    display: inline-block;
    font-weight: 600;
    color: var(--e-global-color-primary);
}

.tuiOrTypeLink,
button.tuiOrTypeLink {
    display: block;
    margin-top: 12px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--e-global-color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* Beat Hello Elementor reset (button:hover/focus → pink #cc3366). */
.tuiOrTypeLink:hover,
.tuiOrTypeLink:focus,
.tuiOrTypeLink:focus-visible,
.tuiOrTypeLink:active,
button.tuiOrTypeLink:hover,
button.tuiOrTypeLink:focus,
button.tuiOrTypeLink:focus-visible,
button.tuiOrTypeLink:active {
    background: transparent;
    color: var(--e-global-color-primary);
    border: none;
    opacity: 0.8;
    outline: none;
}

.tuiMicHelp {
    color: #b3261e;
    margin-top: 8px;
    width: 100%;
}

.tuiReviewBanner {
    background: var(--e-global-color-text);
    border-left: 4px solid var(--e-global-color-primary);
    color: var(--e-global-color-primary);
    padding: 10px 14px;
    margin-bottom: 14px;
}

#reasonAi {
    min-height: 260px;
}

.tuiStep .uploads .file-upload {
    margin-bottom: 8px;
}

/* Classic form uses a large top padding on .subHead2 before Supporting Files —
   strip that in the AI review step only. */
.nzotyAiFormWrapper .subHead2 {
    padding-top: 0;
}

/* Embedded “Write this with Tui” helper on the classic reason field */
.tuiReasonHelperBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 12px;
}

.tuiHelperHint {
    margin: 0;
    flex: 1 1 220px;
    font-size: 0.95em;
    color: var(--e-global-color-primary);
    opacity: 0.9;
}

.tuiEmbedError {
    color: #b3261e;
    margin: 0 0 12px;
    font-size: 0.95em;
}

.tuiEmbedPanel {
    margin: 0 0 16px;
    padding: 16px 18px 18px;
    border: 1px solid var(--e-global-color-primary);
    background: var(--e-global-color-text);
    max-width: none;
}

.tuiEmbedHeader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.tuiEmbedHeader .tuiIntroTitle {
    margin: 0;
}

.tuiHelperIntro {
    margin: 0 0 14px;
    color: var(--e-global-color-primary);
    font-size: 0.95em;
}

.tuiEmbedPanel .tuiChatWindow {
    min-height: 180px;
    max-height: min(42vh, 360px);
}