/* Sutile — minimal overrides on top of shared styles.css */

[x-cloak] {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* Public interview                                                    */
/* ------------------------------------------------------------------ */
.public-interview-page {
    overflow-y: auto;
    background:
        radial-gradient(circle at top left, oklch(94% 0.02 75 / 0.9), transparent 28%),
        linear-gradient(180deg, var(--color-bg) 0%, oklch(94% 0.014 75) 100%);
}

.public-interview-page .app-root {
    min-height: 100vh;
    height: auto;
}

.public-interview-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0.16) 34%, transparent 100%),
        var(--color-bg);
}

.public-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    min-height: 58px;
    margin: 0;
    padding: 0.55rem 2.5rem;
    border-bottom: 1px solid rgba(196, 175, 150, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 100%),
        rgba(245, 243, 237, 0.58);
    box-shadow: 0 10px 28px rgba(68, 52, 37, 0.07);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    flex-shrink: 0;
}

.public-hero__copy {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: none;
    min-width: 0;
}

.public-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-full);
    background: oklch(40% 0.06 255 / 0.1);
    color: var(--color-primary-dark);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-hero__title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--color-primary-dark);
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-hero__subtitle {
    display: none;
}

.public-hero__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.8rem 1rem;
    border: 1px solid oklch(40% 0.06 255 / 0.12);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.public-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-muted);
}

.public-status-dot--connected {
    background: var(--color-success);
}

.public-status-dot--connecting {
    background: var(--color-warning);
    animation: pulse 1.2s ease-in-out infinite;
}

.public-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.public-card {
    width: min(1120px, calc(100% - 5rem));
    margin: 1rem auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.public-card--centered {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.public-card--accent {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    background: color-mix(in oklch, var(--color-primary) 5%, var(--color-card));
    border-radius: var(--radius-lg);
}

.public-card--danger {
    border-color: rgba(168, 57, 59, 0.28);
    background: rgba(253, 242, 242, 0.95);
}

.public-card--success {
    border-color: rgba(46, 139, 106, 0.28);
    background: rgba(237, 247, 243, 0.95);
}

.public-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.public-interview-shell > .public-grid > .public-card:first-child {
    display: none;
}

.public-interview-shell .public-grid .public-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.public-interview-shell .public-card[x-show*="showControlsBar"] {
    width: 100%;
    margin: 0;
    padding: 0.75rem 2.5rem 0.35rem;
    border: none;
    border-bottom: 1px solid rgba(196, 175, 150, 0.22);
    border-radius: 0 0 18px 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.04) 100%),
        rgba(245, 243, 237, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 10px 28px rgba(68, 52, 37, 0.07);
    backdrop-filter: blur(22px) saturate(1.24);
    -webkit-backdrop-filter: blur(22px) saturate(1.24);
    position: sticky;
    top: 0;
    z-index: 80;
}

.public-interview-shell .public-card[x-show*="currentView === 'transcript'"],
.public-interview-shell .public-card[x-show*="currentView === 'perguntas'"] {
    padding: 1.5rem 0 7rem;
}

.public-interview-shell .public-card[x-show*="currentView === 'transcript'"] .public-section-head,
.public-interview-shell .public-card[x-show*="currentView === 'perguntas'"] .public-section-head {
    margin-bottom: 0.75rem;
}

.public-interview-shell .public-transcript-list,
.public-interview-shell .public-upload,
.public-interview-shell .public-pane__section,
.public-interview-shell .public-empty-state {
    margin-top: 0.75rem;
}

.public-interview-shell .public-transcript-item {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--font-size-base);
}

.public-interview-shell .public-transcript-list {
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-card);
    box-shadow: 0 1px 2px rgba(40, 32, 24, 0.04);
}

.public-summary__item {
    display: grid;
    gap: 0.35rem;
}

.public-summary__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    font-weight: 600;
    font-family: var(--font-family);
}

.public-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.public-badge--neutral {
    background: var(--color-border-light);
    color: var(--color-text-secondary);
}

.public-badge--info {
    background: var(--color-info-light);
    color: var(--color-info);
}

.public-badge--warning {
    background: var(--color-warning-light);
    color: oklch(44% 0.12 65);
}

.public-badge--success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.public-intro {
    display: grid;
    gap: var(--space-5);
}

.public-intro h2,
.public-section-head h2,
.public-upload__header h3 {
    margin: 0;
    color: var(--color-primary-dark);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.public-intro p,
.public-section-head p,
.public-upload__header p,
.public-state p,
.public-empty-state p,
.public-attachment-item p {
    margin: 0;
    color: var(--color-text-secondary);
}

.public-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.public-mode-btn {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    min-height: 112px;
    text-align: left;
}

.public-mode-btn__title {
    font-size: var(--font-size-base);
    font-weight: 700;
}

.public-mode-btn__hint {
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.45;
    opacity: 0.9;
}

.public-section-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.public-audio-meter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.public-audio-meter__bar {
    width: 180px;
    max-width: 100%;
    height: 0.8rem;
    background: var(--color-border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.public-audio-meter__fill {
    height: 100%;
    min-width: 4%;
    background: linear-gradient(90deg, oklch(55% 0.06 255) 0%, var(--color-primary) 100%);
    border-radius: inherit;
    transition: width 120ms linear;
}

.public-transcript-list {
    display: grid;
    gap: var(--space-3);
}

.public-transcript-item {
    padding: 0.95rem 1.1rem;
    border-radius: 10px;
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    white-space: pre-wrap;
    line-height: 1.65;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.public-transcript-item--partial {
    opacity: 0.65;
    background: oklch(97% 0.008 75);
}

.public-empty-state {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    margin-bottom: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    background: oklch(97% 0.008 75 / 0.9);
}

.public-processing-banner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.8rem 1rem;
    margin: var(--space-4) 0 0;
    border-radius: 14px;
    background: var(--color-warning-light);
    color: oklch(40% 0.12 65);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.public-composer,
.public-upload {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.public-textarea {
    min-height: 140px;
    resize: vertical;
}

.public-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.public-file-input {
    position: relative;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    border: 1px dashed var(--color-border);
    background: var(--color-card);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-weight: 600;
}

.public-file-input input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.public-file-input:has(input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

.public-upload__header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: flex-start;
}

.public-upload__hint {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.public-attachment-list {
    display: grid;
    gap: var(--space-2);
}

.public-attachment-item {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--color-border-light);
    background: oklch(97% 0.008 75 / 0.92);
}

.public-json,
.public-viability {
    white-space: pre-wrap;
    font: inherit;
    margin: 0;
    color: var(--color-text-secondary);
}

.public-state {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.public-state__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.public-state__icon--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.public-state__icon--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.public-spinner {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid oklch(40% 0.06 255 / 0.16);
    border-top-color: var(--color-primary);
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.public-spinner--sm {
    width: 0.9rem;
    height: 0.9rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Desktop shell nunca deve aparecer em mobile — belt-and-suspenders além do x-show Alpine */
@media (max-width: 1024px) {
    .public-interview-shell {
        display: none;
    }
}

@media (max-width: 820px) {
    .public-interview-shell {
        width: 100%;
        min-height: 100vh;
        padding: 0;
    }

    .public-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.85rem 1rem;
    }

    .public-hero__status {
        white-space: normal;
        width: fit-content;
    }

    .public-actions {
        flex-direction: column;
    }

    .public-actions .proposal-btn,
    .public-mode-btn,
    .public-file-input {
        width: 100%;
    }

    .public-card {
        width: min(100%, calc(100% - 2rem));
        margin-top: 0.9rem;
    }

    .public-interview-shell .public-card[x-show*="showControlsBar"] {
        padding: 0.75rem 1rem 0.35rem;
    }

    .public-summary,
    .public-mode-grid,
    .public-upload__header,
    .public-section-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .public-audio-meter {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-audio-meter__bar {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* AI disclaimer strip                                                 */
/* ------------------------------------------------------------------ */
.sutile-ai-disclaimer {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-6);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-warning-bg);
    border-bottom: 1px solid var(--color-warning);
}

/* ------------------------------------------------------------------ */
/* Rendered markdown output (petição preview inside panel body)        */
/* ------------------------------------------------------------------ */
.sutile-markdown-output {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
    line-height: var(--lh-loose);
    max-width: 72ch;
}

.sutile-markdown-output h1,
.sutile-markdown-output h2,
.sutile-markdown-output h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
    font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
}

.sutile-markdown-output h1 { font-size: var(--font-size-2xl); border-bottom: 2px solid var(--color-border); padding-bottom: 0.5rem; font-weight: 700; }
.sutile-markdown-output h2 { font-size: var(--font-size-xl); border-bottom: 1px solid var(--color-border-light); padding-bottom: 0.25rem; }
.sutile-markdown-output h3 { font-size: var(--font-size-lg); }

.sutile-markdown-output p { margin: 0.5rem 0; }
.sutile-markdown-output ul { padding-left: 1.5rem; margin: 0.5rem 0; list-style: disc; }
.sutile-markdown-output ol { padding-left: 1.5rem; margin: 0.5rem 0; list-style: decimal; }
.sutile-markdown-output li { margin: 0.25rem 0; }
.sutile-markdown-output strong { font-weight: 600; }
.sutile-markdown-output em { font-style: italic; }
.sutile-markdown-output blockquote {
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    background: var(--color-primary-light);
    border: 1px solid oklch(40% 0.06 255 / 0.15);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Anexos list (compact in transcript)                                 */
/* ------------------------------------------------------------------ */
.sutile-anexos-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sutile-anexos-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
}

.sutile-anexos-list small {
    flex: 1 1 100%;
    color: var(--color-muted);
    font-size: var(--font-size-xs);
}

/* ------------------------------------------------------------------ */
/* Help Modal                                                          */
/* ------------------------------------------------------------------ */
.help-modal {
    width: min(1160px, 94vw);
    height: min(760px, 88vh);
    display: flex;
    flex-direction: column;
}

.help-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.help-modal__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.help-modal__icon-wrap {
    width: 30px;
    height: 30px;
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-modal__icon-wrap svg {
    width: 15px;
    height: 15px;
    color: var(--color-primary);
}

.help-modal__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.help-modal__close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
}

.help-modal__close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.help-modal__close svg {
    width: 16px;
    height: 16px;
}

.help-modal__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Tabs */
.help-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    padding: 0 var(--space-5);
    gap: var(--space-1);
}

.help-tab {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-muted);
    padding: var(--space-3) var(--space-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.help-tab:hover {
    color: var(--color-text-secondary);
}

.help-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* Panels */
.help-panel {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Steps */
.help-step {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.help-step__num {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.help-step__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.help-step__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.help-step__content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Audio source cards grid — auto-fit so the wider modal packs more cards
   per row and the panels need far less vertical scroll. */
.help-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-2);
    margin: var(--space-1) 0;
}

.help-source {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}

.help-source__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.help-source div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-source strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.help-source span {
    font-size: 0.825rem;
    color: var(--color-muted);
    line-height: 1.4;
}

/* Tip callout */
.help-tip {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin: 0;
    line-height: 1.5;
}

/* Prominent callout — highly-requested clarifications that must stand out */
.help-callout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    line-height: 1.55;
}

.help-callout__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.help-callout p {
    color: var(--color-text);
    margin: 0;
}

.help-callout strong {
    color: var(--color-text);
}

/* Shared list */
.help-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.help-list li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    padding-left: var(--space-4);
    position: relative;
}

.help-list li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* AI disclaimer */
.help-disclaimer {
    font-size: var(--font-size-xs);
    color: oklch(38% 0.12 55);
    background: var(--color-warning-bg);
    border: 1px solid oklch(65% 0.12 65 / 0.4);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    line-height: 1.5;
}

/* FAQ Accordion */
.help-faq {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.help-faq__item {
    border-bottom: 1px solid var(--color-border);
}

.help-faq__item:last-child {
    border-bottom: none;
}

.help-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    transition: background var(--transition-fast);
}

.help-faq__q:hover {
    background: var(--color-border-light);
}

.help-faq__item--open .help-faq__q {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.help-faq__arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
    color: var(--color-muted);
}

.help-faq__item--open .help-faq__arrow {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.help-faq__a {
    padding: var(--space-1) var(--space-4) var(--space-3);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

/* LGPD tab */
.help-lgpd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.help-lgpd__icon {
    width: 52px;
    height: 52px;
    background: var(--color-success-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-lgpd__icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-success);
}

.help-lgpd h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.help-lgpd .help-list {
    text-align: left;
    width: 100%;
}

/* Footer */
.help-modal__footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .help-modal {
        width: 100%;
        height: auto;
        max-height: 90vh;
    }

    .help-sources {
        grid-template-columns: 1fr;
    }

    .help-panel {
        padding: var(--space-4);
    }

    .help-modal__header {
        padding: var(--space-3) var(--space-4);
    }

    .help-tabs {
        padding: 0 var(--space-3);
    }

    .help-modal__footer {
        padding: var(--space-3) var(--space-4);
    }
}

/* ------------------------------------------------------------------ */
/* Mobile: recording station fills the column (no tab bar)            */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .app-with-sidebar .app-content {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

}

/* --- Public Interview Mobile Overrides --- */
@media (max-width: 768px) {
    .public-interview-shell.proposal-shell {
        display: block !important;
    }

    .public-hero__copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .public-hero__title {
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .public-chip {
        max-width: 100%;
    }

    .public-interview-shell .public-card[x-show*="currentView === 'transcript'"],
    .public-interview-shell .public-card[x-show*="currentView === 'perguntas'"] {
        padding: 1rem 0 8rem;
    }

    .public-query-wrap {
        padding: 0 1rem 1rem;
    }

    .public-shell .mobile-topbar__hamburger:not(.mobile-topbar__info) {
        display: none;
    }

    .public-shell .mobile-topbar__wing--left .public-summary-chip {
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
    }

    .public-shell .mobile-topbar__title {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================================
   Transcrição slide-over (Phase 1)
   Global left panel hosting the live transcript. Overlays the
   page (incl. the module rail) without displacing layout.
   Colours inherit from the existing design tokens so the panel
   tracks light/dark automatically.
   ============================================================ */
.transcript-scrim {
    position: fixed;
    inset: 0;
    z-index: 320;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.transcript-scrim--open {
    opacity: 1;
    pointer-events: auto;
}

.transcript-slideover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 330;
    width: 560px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border-right: 1px solid var(--color-border);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    opacity: 0;
    /* clearly visible drawer slide (ease-out-quart, ~460ms). Opacity settles
       early (200ms) so the eye reads the panel travelling rather than just
       fading. The populated panel slides in as ONE unit — no separate, delayed
       content reveal, which is what left a blank-panel gap before the text
       appeared. */
    transition:
        transform 0.46s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.2s ease,
        box-shadow 0.46s ease;
    will-change: transform;
}
.transcript-slideover--open {
    transform: translateX(0);
    opacity: 1;
    box-shadow: 12px 0 56px rgba(0, 0, 0, 0.28);
}

/* respect reduced-motion: crossfade in place, no slide */
@media (prefers-reduced-motion: reduce) {
    .transcript-scrim,
    .transcript-slideover {
        transition: opacity 0.16s linear;
    }
}

.transcript-slideover__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}
.transcript-slideover__title {
    margin: 0;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}
.transcript-slideover__live {
    /* first item in the head now; no left offset so it lines up with the
       closed-state badge position */
    margin-left: 0;
}
.transcript-slideover__close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.transcript-slideover__close:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
}
.transcript-slideover__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem;
    /* Composited-scrolling fix (same as .proposal-main__scroller): own GPU
       layer so scrolling doesn't repaint on the main thread / desync in Chrome. */
    transform: translateZ(0);
}

/* Topbar trigger badge (mirrors the old tab badge styling) */
.proposal-transcript-trigger__badge {
    display: inline-block;
    margin-left: 0.4rem;
    min-width: 1.5rem;
    padding: 0 0.35rem;
    height: 1.05rem;
    line-height: 1.05rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

/* Mobile transcript trigger in the mobile topbar left wing */
.mobile-topbar__transcript {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-muted);
    cursor: pointer;
    flex: 0 0 auto;
    margin-right: 0.5rem;
}
.mobile-topbar__transcript:hover {
    color: var(--color-text);
}

@media (max-width: 599px) {
    .transcript-slideover {
        width: 100vw;
        max-width: 100vw;
    }
}

/* =====================================================================
   Perguntas redesign — module rail + question hero (desktop)
   Uses existing color tokens; module accent comes from --modulo-cor.
   ===================================================================== */
.proposal-perguntas-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.proposal-perguntas-mobile-grid {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- left rail ---- */
.proposal-modulo-rail {
    flex: 0 0 252px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Pin the rail inside .proposal-main__scroller so only the center column
       (questions) scrolls. The rail only scrolls internally if it is itself
       taller than the viewport. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: calc((100vh / var(--ui-zoom)) - 218px);
    overflow-y: auto;
}
.proposal-modulo-rail__head {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-muted);
    padding: 0.15rem 0.25rem 0.35rem;
    /* part of the rail "veil" — see the veil block below */
    opacity: 0.5;
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.proposal-modulo-rail-item {
    position: relative;
    text-align: left;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    /* resting state is veiled (see the rail "veil" block below); the rail
       fades to full clarity on hover/focus */
    opacity: 0.5;
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.proposal-modulo-rail-item:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.proposal-modulo-rail-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.proposal-modulo-rail-item--active {
    border-color: var(--modulo-cor, var(--color-primary));
    /* full module-coloured ring + soft glow + tint reads as "active" at a
       glance without a left side-stripe */
    box-shadow:
        0 0 0 1px var(--modulo-cor, var(--color-primary)),
        0 2px 10px color-mix(in oklch, var(--modulo-cor, var(--color-primary)) 14%, transparent);
    background: color-mix(in oklch, var(--modulo-cor, var(--color-primary)) 6%, var(--color-card));
}
.proposal-modulo-rail-item--complete {
    /* done modules recede into the veil — nothing left to ask — but not so
       far that the green "complete" ring/check stops reading at a glance */
    opacity: 0.6;
}
/* ---- rail "veil" ----
   At rest the rail sits under a soft wash: every module except the one in
   focus fades toward the page background so the column reads calm and
   uncluttered in a peripheral glance. Moving the pointer anywhere over the
   rail lifts the whole wash to full clarity; leaving the rail re-veils it.
   Opacity, not a literal white layer, so it tracks the theme: a white wash in
   light mode, a darkening one in dark mode.

   Lift on :hover (follows the cursor, so it never sticks) and per-item
   :focus-visible (keyboard nav only — a mouse click does NOT match it, so
   clicking a module no longer pins the veil open until you click away). */
.proposal-modulo-rail-item--active {
    opacity: 1;
}
.proposal-modulo-rail:hover .proposal-modulo-rail__head,
.proposal-modulo-rail:hover .proposal-modulo-rail-item,
.proposal-modulo-rail-item:focus-visible {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .proposal-modulo-rail__head {
        transition: none;
    }
    .proposal-modulo-rail-item {
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
}
/* compact single line: name · ring · count */
.proposal-modulo-rail-item__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
/* modules with new AI suggestions glow softly in their accent colour
   (replaces the old status dot) */
.proposal-modulo-rail-item--suggest:not(.proposal-modulo-rail-item--active) {
    border-color: color-mix(in oklch, var(--modulo-cor, var(--color-primary)) 42%, var(--color-border));
    animation: railSuggestGlow 2.6s ease-in-out infinite;
}
@keyframes railSuggestGlow {
    0%, 100% {
        box-shadow: 0 0 4px 0 color-mix(in oklch, var(--modulo-cor, var(--color-primary)) 16%, transparent);
    }
    50% {
        box-shadow: 0 0 9px 0 color-mix(in oklch, var(--modulo-cor, var(--color-primary)) 32%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) {
    .proposal-modulo-rail-item--suggest:not(.proposal-modulo-rail-item--active) {
        animation: none;
        box-shadow: 0 0 7px 0 color-mix(in oklch, var(--modulo-cor, var(--color-primary)) 24%, transparent);
    }
}
.proposal-modulo-rail-item__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* mini progress ring (inactive rows) — single smooth SVG stroke arc, so the
   fill reads as one continuous element rather than a conic/mask mashup. The
   arc length is set per-module via an inline stroke-dashoffset (see the
   `ringStyle` getter), so it is always proportional to how complete the
   module is. */
.proposal-modulo-rail-item__ring-wrap {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}
.proposal-modulo-rail-item__ring {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg); /* start the arc at 12 o'clock */
    overflow: visible;
}
.proposal-modulo-rail-item__ring-track,
.proposal-modulo-rail-item__ring-fill {
    fill: none;
    stroke-width: 4;
}
/* neutral track — deliberately NOT module-tinted, so the coloured fill arc
   stays legible against it regardless of the module's own hue */
.proposal-modulo-rail-item__ring-track {
    stroke: color-mix(in oklch, var(--color-muted) 26%, transparent);
}
.proposal-modulo-rail-item__ring-fill {
    stroke: var(--modulo-cor, var(--color-primary));
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100; /* empty by default; ringStyle overrides inline */
    transition: stroke-dashoffset 0.35s ease, stroke 0.2s ease;
}
/* completed module: the arc + track turn success-green and a check sits in
   the centre, so "done" is unmistakable even as the row recedes */
.proposal-modulo-rail-item--complete .proposal-modulo-rail-item__ring-track {
    stroke: color-mix(in oklch, var(--color-success) 24%, transparent);
}
.proposal-modulo-rail-item--complete .proposal-modulo-rail-item__ring-fill {
    stroke: var(--color-success);
}
.proposal-modulo-rail-item__ring-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-success);
    opacity: 0;
}
.proposal-modulo-rail-item--complete .proposal-modulo-rail-item__ring-check::before {
    content: "✓";
}
.proposal-modulo-rail-item--complete .proposal-modulo-rail-item__ring-check {
    opacity: 1;
}
.proposal-modulo-rail-item__count {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* focus accordion: full progress bar appears only on the active module */
.proposal-modulo-rail-item__meta {
    display: none;
}
.proposal-modulo-rail-item__meta .proposal-modulo-card__progress {
    flex: 1 1 auto;
    margin: 0;
}
.proposal-modulo-rail-item__count--full {
    font-weight: 500;
}
.proposal-modulo-rail-item--active .proposal-modulo-rail-item__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.proposal-modulo-rail-item--active .proposal-modulo-rail-item__ring-wrap,
.proposal-modulo-rail-item--active .proposal-modulo-rail-item__row .proposal-modulo-rail-item__count {
    display: none;
}
/* Lacunas documentais — synthetic rail entry. No progress ring; a small amber
   "!" badge stands in for it, and (unlike a real module) the badge + count stay
   visible even when the entry is the active one. */
.proposal-modulo-rail-item__lacunas-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--modulo-cor, #d97706) 18%, transparent);
    color: var(--modulo-cor, #d97706);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}
.proposal-modulo-rail-item--lacunas.proposal-modulo-rail-item--active .proposal-modulo-rail-item__ring-wrap,
.proposal-modulo-rail-item--lacunas.proposal-modulo-rail-item--active .proposal-modulo-rail-item__row .proposal-modulo-rail-item__count {
    display: inline-flex;
}
/* ---- center column: focused module's questions (inline) ---- */
.proposal-perguntas-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.proposal-modulo-focus {
    --focus-cor: var(--modulo-cor, var(--color-primary));
    /* single source of truth for the rhythm inside the panel: every row
       (suggested cards, answered, roteiro) sits this far from the next, so the
       three sections read as one consistent list rather than three densities */
    --focus-row-gap: 0.5rem;
    /* separation between the three sections (Sugeridas · Respondidas · Roteiro).
       The body is a flex column with this as its gap, so the distance is the
       same everywhere and never depends on margin-collapse. */
    --focus-section-gap: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 16px);
    background: var(--color-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.06));
}

/* ---- header: module-coloured band + progress ---- */
.proposal-modulo-focus__header {
    padding: 1.05rem 1.4rem 0.4rem;
    background:
        linear-gradient(180deg,
            color-mix(in oklch, var(--focus-cor) 10%, transparent),
            transparent);
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
}
.proposal-modulo-focus__heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.proposal-modulo-focus__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--focus-cor);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--focus-cor) 18%, transparent);
    flex: 0 0 auto;
}
.proposal-modulo-focus__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.proposal-modulo-focus__count {
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.proposal-modulo-focus__progress {
    height: 6px;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in oklch, var(--focus-cor) 14%, var(--color-bg-subtle));
    overflow: hidden;
}
.proposal-modulo-focus__progress .proposal-modulo-card__progress-fill {
    background: var(--focus-cor);
    border-radius: var(--radius-full, 999px);
}

/* ---- body / sections ----
   Flex column: one gap rules the separation between all three sections, and the
   top padding gives the first section the same clearance from the coloured band.
   No margin-collapse, no per-neighbour special-casing. Each section is just a
   header followed by its list of rows. */
.proposal-modulo-focus__body {
    display: flex;
    flex-direction: column;
    gap: var(--focus-section-gap);
    padding: var(--focus-section-gap) 1.4rem 1.5rem;
}
.proposal-modulo-focus .proposal-modulo-secao-header {
    /* relative only to anchor the ::before pill. The shared base rule is
       position:sticky with top: calc(-1 * var(--space-3)); switching to relative
       without resetting top left that offset pulling every header ~0.75rem UP
       (tight above, big gap below). Reset it so headers sit in natural flow. */
    position: relative;
    top: auto;
    /* force the body font on every section label: the answered/roteiro
       headers are <h4> (→ Vollkorn serif via the global heading rule) while
       "Sugeridas pela IA" is a <div>; without this they render in two
       different fonts. These are small uppercase labels → sans, like the rail
       head. */
    font-family: var(--font-family);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-muted);
    /* only a bottom margin (header → its list). The space ABOVE the header is
       owned by the body's flex gap / top padding, so it's identical for all
       three sections no matter what sits above. */
    margin: 0 0 0.5rem;
    padding: 0.34rem 0.75rem 0.36rem 0.75rem;
    line-height: 1.25;
    /* soft rounded chip with a uniform module tint (no directional fade) */
    border-radius: 10px;
    background: color-mix(in oklch, var(--focus-cor) 6%, transparent);
}
/* left accent marker in the module colour — echoes the suggested cards' left
   border, but as a rounded, centred pill with a soft glow so it reads gentle
   rather than as a hard full-height rule */
.proposal-modulo-focus .proposal-modulo-secao-header::before {
    content: "";
    position: absolute;
    left: 0.32rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.82em;
    border-radius: 999px;
    background: color-mix(in oklch, var(--focus-cor) 62%, transparent);
    box-shadow: 0 0 5px color-mix(in oklch, var(--focus-cor) 30%, transparent);
}

/* ---- suggested: featured accent cards inside a subtle module-tinted panel ----
   The panel is a tint + radius only (no border), so the cards inside read as
   rows grouped on a soft surface rather than cards nested in another card. It
   deliberately does NOT use the mobile .proposal-modulo-secao--sugeridas box. */
.proposal-modulo-focus__sug {
    /* fixed subtle orange across every module (the AI-suggestions identity),
       not the per-module tint. Muted by blending the warning tint toward the
       surface so it stays soft; theme-aware via both tokens. */
    background: color-mix(in oklch, var(--color-warning-bg) 62%, var(--color-card));
    border-radius: var(--radius-lg, 14px);
    padding: 0.85rem 0.75rem 0.75rem;
}
/* identical font + styling to the "Perguntas respondidas" header: it inherits
   the base section-header chip (muted ink, tint chip, accent pill). The only
   extra is the right-aligned hint, so it stays a flex row — no module-colour
   override, no lightbulb. */
.proposal-modulo-focus .proposal-modulo-secao-header--sug {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* a touch tighter header → first-card gap than the default section spacing */
.proposal-modulo-focus__sug .proposal-modulo-secao-header--sug {
    margin-bottom: 0.4rem;
}
.proposal-modulo-focus__sug-hint {
    margin-left: auto;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    text-transform: none;
}
.proposal-modulo-focus__sug-card {
    display: block;
    /* solid surface so each card lifts off the tinted panel behind it */
    background: var(--color-card);
    border: 1px solid color-mix(in oklch, var(--focus-cor) 24%, transparent);
    border-radius: var(--radius-md, 12px);
    /* match the answered/roteiro rows: same vertical density, same left edge */
    padding: 0.6rem 0.9rem;
    margin-bottom: var(--focus-row-gap);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.proposal-modulo-focus__sug-card:last-child {
    margin-bottom: 0;
}
.proposal-modulo-focus__sug-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in oklch, var(--focus-cor) 16%, transparent);
}
/* suggested questions match the answered/roteiro question size exactly — same
   font, same size, so nothing in the list reads as "a different font". The
   featured card stands out through its tint + shadow, not a bigger glyph. */
.proposal-modulo-focus__sug-card .proposal-perguntas-list__body strong {
    font-size: 0.92rem;
    line-height: 1.35;
}
/* first suggested = the prominent "next question" (card right after header) */
.proposal-modulo-secao-header--sug + .proposal-modulo-focus__sug-card {
    background: linear-gradient(180deg,
        color-mix(in oklch, var(--focus-cor) 14%, var(--color-card)),
        color-mix(in oklch, var(--focus-cor) 6%, var(--color-card)));
    /* same horizontal padding as every other row so the question text shares one
       left edge; keeps a touch more vertical room for the featured "next" card */
    padding: 0.68rem 0.9rem;
    box-shadow: 0 4px 16px color-mix(in oklch, var(--focus-cor) 12%, transparent);
}
/* featured "next question" keeps the same text size as every other question
   (emphasis comes from the card's tint + shadow above, not a larger font) */

/* ---- answered / remaining rows: cleaner cards ---- */
.proposal-modulo-focus .proposal-perguntas-list--ordered {
    list-style: none;
    margin: 0;
    padding: 0;
    /* override the base list's 0.9rem flex gap: the rows used to get this gap
       PLUS a per-item margin-bottom, stacking to ~1.3rem and making these
       sections far airier than the suggested cards. Now one token rules both. */
    gap: var(--focus-row-gap);
}
.proposal-modulo-focus .proposal-perguntas-list__item--clickable {
    background: var(--color-bg-subtle, var(--color-card));
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: var(--radius-md, 12px);
    padding: 0.6rem 0.9rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.proposal-modulo-focus .proposal-perguntas-list__item--clickable:hover {
    border-color: var(--focus-cor);
}
/* answered questions keep a muted green tint (palette tokens, theme-aware) */
/* answered = a calm "done" whisper, not an active highlight — the solid
   module-coloured check glyph carries the state; the tint stays quiet so the
   suggested "next question" remains the focal point */
.proposal-modulo-focus .proposal-perguntas-list__item--answered {
    background: color-mix(in oklch, var(--color-success-light) 55%, var(--color-card));
    border-color: color-mix(in oklch, var(--color-success) 15%, var(--color-border));
}
.proposal-modulo-focus .proposal-perguntas-list__item--answered:hover {
    border-color: color-mix(in oklch, var(--color-success) 36%, var(--color-border));
}
.proposal-modulo-focus .proposal-perguntas-list__index {
    color: var(--color-placeholder, var(--color-muted));
    font-variant-numeric: tabular-nums;
}

/* status glyph — replaces the numeric index with a decorative module-coloured
   state mark (✓ answered · ◇ remaining). Order/ranking is unchanged in JS. */
.proposal-modulo-focus .proposal-perguntas-list__glyph {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    background: color-mix(in oklch, var(--focus-cor) 12%, var(--color-card));
    color: color-mix(in oklch, var(--focus-cor) 72%, var(--color-text));
    font-variant-numeric: normal;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* answered / manual → solid module-coloured check */
.proposal-modulo-focus .proposal-perguntas-list__item--answered .proposal-perguntas-list__glyph,
.proposal-modulo-focus .proposal-perguntas-list__item--manual .proposal-perguntas-list__glyph {
    background: var(--focus-cor);
    border-color: var(--focus-cor);
    color: #fff;
}
/* remaining → hollow, muted outline diamond */
.proposal-modulo-focus .proposal-perguntas-list__item--question .proposal-perguntas-list__glyph {
    background: transparent;
    border-color: color-mix(in oklch, var(--focus-cor) 32%, var(--color-border));
    color: color-mix(in oklch, var(--focus-cor) 52%, var(--color-muted));
    font-weight: 600;
}

/* ---- responsive: collapse rail on medium widths ---- */
@media (max-width: 1100px) {
    .proposal-modulo-rail {
        flex-basis: 200px;
    }
}
@media (max-width: 900px) {
    .proposal-perguntas-layout {
        flex-direction: column;
    }
    .proposal-modulo-rail {
        flex-basis: auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .proposal-modulo-rail__head {
        width: 100%;
    }
    .proposal-modulo-rail-item {
        flex: 1 1 160px;
    }
}

/* =====================================================================
   Shared compact query bar (Perguntas · Viabilidade · Petição)
   ===================================================================== */
.sutile-query--unified {
    margin-top: 0.6rem;
}
.sutile-query__input-row--compact {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}
.sutile-query__input--compact {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    rows: 1;
    min-height: 2.6rem;
    max-height: 140px;
    line-height: 1.45;
    padding: 0.6rem 0.8rem;
}
.sutile-query__icon-btn {
    flex: 0 0 auto;
    /* annex button — deliberately smaller than the main Gerar/Analisar action */
    width: 2.15rem;
    height: 2.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle, var(--color-card));
    color: var(--color-text-secondary);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sutile-query__icon-btn .icon-sm {
    width: 0.95rem;
    height: 0.95rem;
}
/* labelled main action (Gerar / Analisar) */
.gerar-submit--labeled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.gerar-submit__label {
    font-weight: 600;
}
.sutile-query__icon-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.sutile-query__icon-btn--send {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary, #fff);
}
.sutile-query__icon-btn--send:hover {
    filter: brightness(1.07);
    color: var(--color-on-primary, #fff);
}
.sutile-query__icon-btn--send:disabled {
    opacity: 0.6;
    cursor: default;
    filter: none;
}