/* ========================================
   AI Planter — App Component Styles
   Analyzer, results, progress, camera, charts
   ======================================== */

/* ========================================
   Analyzer Section (light theme)
   ======================================== */
.analyzer {
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.analyzer .section-tag {
    color: var(--color-primary);
}

.analyzer .section-title {
    color: var(--color-gray-900);
}

.analyzer .section-subtitle {
    color: var(--color-gray-500);
}

.analyzer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 680px;
    margin: 0 auto;
}

.analyzer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.analyzer-content .section-title {
    font-size: var(--fs-3xl);
}

.analyzer-upload {
    width: 100%;
    margin: var(--s-6) 0;
}

.upload-zone {
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--r-xl);
    padding: var(--s-12) var(--s-6);
    cursor: pointer;
    transition: border-color var(--t-base), background var(--t-base);
    background: var(--color-white);
}

.upload-zone:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.upload-zone.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    border-style: solid;
}

.upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--r-full);
    margin: 0 auto var(--s-4);
}

.upload-icon i {
    width: 26px;
    height: 26px;
}

.upload-text {
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--s-1);
}

.upload-hint {
    font-size: var(--fs-sm);
    color: var(--color-gray-500);
}

.upload-preview {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--sh-md);
}

.upload-preview img {
    max-width: 100%;
    max-height: 320px;
    display: block;
    margin: 0 auto;
}

/* WebGPU scan overlay (scan-fx.js): JS pins it to the exact img box during
   analysis; the container's overflow:hidden clips it. DOM order (after the
   img, before the remove button) keeps stacking correct without z-index. */
.scan-canvas {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.upload-remove {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    transition: background var(--t-fast);
    z-index: 2;
}

.upload-remove:hover {
    background: rgba(0, 0, 0, 0.85);
}

.upload-remove i {
    width: 18px;
    height: 18px;
}

/* Demo actions */
.demo-actions {
    display: flex;
    gap: var(--s-4);
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   Analysis Progress
   ======================================== */
.analysis-progress {
    width: 100%;
    margin-top: var(--s-6);
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--r-full);
    overflow: hidden;
    margin-bottom: var(--s-5);
}

.progress-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-primary);
    border-radius: var(--r-full);
    transition: width var(--t-base);
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    opacity: 0.35;
    transition: opacity var(--t-base);
    flex: 1;
}

.progress-step.active {
    opacity: 1;
}

.progress-step.done {
    opacity: 1;
}

.step-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    border-radius: var(--r-full);
    transition: background var(--t-base), color var(--t-base);
}

.step-icon-box i {
    width: 16px;
    height: 16px;
}

.progress-step.active .step-icon-box {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    animation: pulse 1.5s ease-in-out infinite;
}

.progress-step.done .step-icon-box {
    background: var(--color-success);
    color: #fff;
}

.step-label {
    font-size: var(--fs-xs);
    color: var(--color-gray-500);
    text-align: center;
    line-height: 1.3;
}

.progress-step.active .step-label {
    color: var(--color-gray-900);
    font-weight: 600;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ========================================
   Loading State
   ======================================== */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-12);
    color: var(--color-gray-700);
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin-bottom: var(--s-4);
}

.loading-text {
    font-size: var(--fs-base);
    color: var(--color-gray-600);
}

/* ========================================
   Results Panel
   ======================================== */
.analyzer-result {
    width: 100%;
    margin-top: var(--s-6);
}

.results-panel {
    background: var(--color-white);
    border-radius: var(--r-xl);
    padding: var(--s-8);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--sh-md);
    animation: slideUp 0.4s ease-out;
    text-align: left;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-header {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.result-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--r-lg);
    object-fit: cover;
    background: var(--color-gray-100);
    flex-shrink: 0;
}

.result-avatar {
    display: none;
}

.result-info {
    flex: 1;
    min-width: 0;
}

.result-name {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.2;
}

.result-scientific {
    font-size: var(--fs-sm);
    color: var(--color-gray-500);
    font-style: italic;
    display: block;
    margin-bottom: var(--s-2);
}

.confidence-bar-container {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
}

.confidence-bar {
    flex: 1;
    height: 6px;
    background: var(--color-gray-100);
    border-radius: var(--r-full);
    overflow: hidden;
    max-width: 200px;
}

.confidence-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--r-full);
    transition: width 0.6s ease;
}

.confidence-bar.low .confidence-fill {
    background: var(--color-warning);
}

.result-confidence {
    font-size: var(--fs-sm);
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

.confidence-breakdown {
    font-size: 11px;
    color: var(--color-gray-500);
    margin-top: var(--s-1);
}

.result-body {
    padding-top: var(--s-5);
}

.result-section {
    margin-bottom: var(--s-6);
}

/* In-result toolkit CTA — shown when the analyzer detects a problem */
.result-toolkit-cta {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-white));
    border: 1px solid var(--color-primary-light);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    text-decoration: none;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.result-toolkit-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-md);
}
.result-toolkit-cta-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-full);
    background: var(--color-primary);
    color: var(--color-white);
}
.result-toolkit-cta-icon i {
    width: 18px;
    height: 18px;
}
.result-toolkit-cta-body {
    min-width: 0;
}
.result-toolkit-cta-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.35;
}
.result-toolkit-cta-sub {
    font-size: var(--fs-xs);
    color: var(--color-gray-600);
    margin-top: 2px;
}

.result-section h4 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--s-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.result-section h5 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--s-2);
}

/* Health badge */
.health-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-full);
    font-weight: 600;
    font-size: var(--fs-sm);
}

.health-badge.healthy {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.health-badge.unhealthy {
    background: var(--color-error-soft);
    color: var(--color-error);
}

.health-badge i {
    width: 14px;
    height: 14px;
}

/* Predictions list */
.predictions-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
}

.predictions-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-2) var(--s-3);
    background: var(--color-gray-50);
    border-radius: var(--r-md);
}

.pred-name {
    font-size: var(--fs-sm);
    color: var(--color-gray-700);
}

.pred-confidence-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.pred-confidence-bar {
    width: 56px;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--r-full);
    overflow: hidden;
}

.pred-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--r-full);
    transition: width var(--t-base);
}

.pred-confidence {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-primary);
    min-width: 40px;
    text-align: right;
}

/* Disease details */
.disease-type {
    font-size: var(--fs-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--s-3);
}

.symptom-list,
.treatment-list {
    padding-left: var(--s-5);
    margin: var(--s-2) 0;
    list-style: disc;
}

.symptom-list li,
.treatment-list li {
    color: var(--color-gray-600);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-2);
    line-height: 1.5;
}

.treatment-list h6 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-top: var(--s-3);
    margin-bottom: var(--s-2);
}

.treatment-list li strong {
    color: var(--color-gray-800);
}

.treatment-list li small {
    color: var(--color-gray-500);
    font-size: var(--fs-xs);
}

/* Care list */
.care-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
}

.care-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    color: var(--color-gray-600);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.care-list li i {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.care-list li strong {
    color: var(--color-gray-800);
}

/* Badges */
.warning-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--r-full);
    margin-right: var(--s-2);
    margin-bottom: var(--s-2);
}

.safe-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--r-full);
    margin-right: var(--s-2);
    margin-bottom: var(--s-2);
}

.warning-badge i,
.safe-badge i {
    width: 12px;
    height: 12px;
}

/* Result actions */
.result-actions {
    display: flex;
    gap: var(--s-4);
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--color-gray-100);
    flex-wrap: wrap;
}

/* Match bars (replaces Chart.js) */
.match-bars {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: var(--s-4) 0;
}

.match-bar-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.match-bar-name {
    flex: 0 0 42%;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--color-gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-bar-track {
    flex: 1;
    height: 8px;
    background: var(--color-gray-100);
    border-radius: var(--r-full);
    overflow: hidden;
}

.match-bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--color-primary);
    transition: width 0.5s ease;
}

.match-bar-row:not(:first-child) .match-bar-fill {
    background: var(--color-primary-light);
    opacity: 0.55;
}

.match-bar-pct {
    flex: 0 0 44px;
    text-align: right;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-primary);
}

/* ========================================
   Warning / Not-plant / Uncertain states
   ======================================== */
.warning-header {
    text-align: center;
    padding: var(--s-6);
    border-radius: var(--r-xl);
    margin-bottom: var(--s-6);
}

.warning-header.not-plant {
    background: var(--color-error-soft);
    border: 1px solid rgba(185, 28, 28, 0.2);
}

.warning-header.uncertain {
    background: var(--color-warning-soft);
    border: 1px solid rgba(180, 83, 9, 0.2);
}

.warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-full);
    margin-bottom: var(--s-3);
}

.not-plant .warning-icon {
    background: var(--color-error-soft);
    color: var(--color-error);
}

.uncertain .warning-icon {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.warning-icon i {
    width: 24px;
    height: 24px;
}

.warning-header h3 {
    font-size: var(--fs-xl);
    color: var(--color-gray-900);
    margin-bottom: var(--s-1);
}

.warning-subtitle {
    color: var(--color-gray-600);
    font-size: var(--fs-sm);
}

.warning-message {
    color: var(--color-gray-700);
    font-size: var(--fs-base);
    line-height: 1.7;
    margin-bottom: var(--s-6);
    text-align: center;
}

.warning-tips,
.tip-list {
    background: var(--color-gray-50);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    margin-top: var(--s-4);
    list-style: none;
}

.warning-tips h4,
.tip-list h4 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--s-3);
}

.warning-tips li,
.tip-list li {
    color: var(--color-gray-600);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-2);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
}

.warning-tips li i,
.tip-list li i {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   Error State
   ======================================== */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-12);
    text-align: center;
}

.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-error-soft);
    color: var(--color-error);
    border-radius: var(--r-full);
    margin-bottom: var(--s-4);
}

.error-icon i {
    width: 28px;
    height: 28px;
}

.error-state h3 {
    font-size: var(--fs-xl);
    color: var(--color-gray-900);
    margin-bottom: var(--s-2);
}

.error-state p {
    color: var(--color-gray-600);
    margin-bottom: var(--s-6);
    max-width: 400px;
}

/* ========================================
   Camera Modal
   ======================================== */
.camera-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.camera-modal video {
    max-width: 92vw;
    max-height: 60vh;
    border-radius: var(--r-lg);
}

.camera-modal .camera-actions {
    display: flex;
    gap: var(--s-4);
    margin-top: var(--s-6);
}

.camera-modal .close-camera {
    position: absolute;
    top: var(--s-6);
    right: var(--s-6);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast);
}

.camera-modal .close-camera:hover {
    background: rgba(255, 255, 255, 0.2);
}

.camera-modal .close-camera i {
    width: 22px;
    height: 22px;
}

/* ========================================
   Magnetic CTA (subtle hover attraction)
   ======================================== */
.magnetic-cta {
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

/* ========================================
   Mobile optimizations
   ======================================== */
@media (max-width: 480px) {
    .results-panel {
        padding: var(--s-5);
    }

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

    .result-actions .btn {
        width: 100%;
    }

    .progress-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-3);
    }

    .progress-step {
        flex-direction: row;
        gap: var(--s-3);
        width: 100%;
    }

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

    .demo-actions .btn {
        width: 100%;
    }

    .camera-modal video {
        max-height: 50vh;
    }

    .result-thumb {
        width: 56px;
        height: 56px;
    }
}

/* ---- Plant encyclopedia homepage section ---- */
.plants-home { padding: var(--s-16) 0; background: var(--color-gray-50); border-top: 1px solid var(--color-gray-200); }
.encyclopedia-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16);align-items:center}
.encyclopedia-text .section-subtitle{margin-bottom:var(--s-2)}
.popular-list{list-style:none;margin:var(--s-6) 0 var(--s-8)}
.popular-list li{display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--color-gray-200)}
.popular-list li:first-child{border-top:1px solid var(--color-gray-200)}
.popular-list .pl-sci{font-size:var(--fs-xs);color:var(--color-gray-400);font-style:italic}
.popular-list a{font-weight:600;color:var(--color-gray-800);transition:color var(--t-fast)}
.popular-list a:hover{color:var(--color-primary)}
.popular-list .pl-arrow{margin-left:auto;color:var(--color-primary-light)}
.browser-frame{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--r-xl);padding:var(--s-3);box-shadow:var(--sh-lg)}
.browser-bar{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-1) var(--s-3)}
.browser-dots{display:flex;gap:5px;flex-shrink:0}
.browser-dots span{width:10px;height:10px;border-radius:50%;background:var(--color-gray-200)}
.browser-url{flex:1;background:var(--color-gray-50);border-radius:var(--r-full);padding:5px 14px;font-size:var(--fs-xs);color:var(--color-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-shot{border-radius:var(--r-lg);overflow:hidden;line-height:0}
.browser-shot img{width:100%;height:auto;display:block}
.encyclopedia-cap{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--color-gray-500)}
@media (max-width:900px){
    .encyclopedia-layout{grid-template-columns:1fr;gap:var(--s-10)}
}

/* ---- enhanced results: encyclopedia + wisdom blocks ---- */
.related-plants { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.related-plant-link { display: inline-block; padding: 4px 12px; border: 1px solid var(--color-gray-200); border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--color-primary); background: var(--color-white); transition: border-color var(--t-fast), background var(--t-fast); }
.related-plant-link:hover { border-color: var(--color-primary-light); background: var(--color-primary-soft); }
.care-schedule-note { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--color-gray-400); }
.ai-breakdown { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.ai-row { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.ai-label { flex: 0 0 130px; color: var(--color-gray-600); }
.ai-track { flex: 1; height: 8px; background: var(--color-gray-100); border-radius: var(--r-full); overflow: hidden; }
.ai-fill { display: block; height: 100%; background: var(--color-primary-light); border-radius: var(--r-full); }
.ai-pct { flex: 0 0 44px; text-align: right; color: var(--color-gray-500); font-variant-numeric: tabular-nums; }
.ai-note { font-size: var(--fs-sm); color: var(--color-gray-500); margin-top: var(--s-1); }
.photo-quality { font-size: var(--fs-sm); color: var(--color-gray-600); }
.encyclopedia-note { font-size: var(--fs-sm); color: var(--color-gray-500); margin-bottom: var(--s-3); }
@media (max-width: 480px) {
    .ai-label { flex-basis: 100px; }
}

/* Reserve the preview box so a photo swap can never shift the page below it.
   width/height attributes on #previewImage supply the intrinsic ratio; the
   container caps the height. */
.upload-preview img {
    width: auto;
    height: auto;
    object-fit: contain;
    aspect-ratio: 4 / 3;
}

/* --- Match confidence, close call and local feedback (Oct 2026) ---------- */
.match-signals{display:flex;flex-wrap:wrap;gap:.4rem;margin:.35rem 0 .9rem}
.match-signal{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;letter-spacing:.02em;
  padding:.22rem .6rem;border-radius:999px;border:1px solid var(--color-primary-soft,#cfe3d5);
  background:color-mix(in srgb,var(--color-primary-soft,#cfe3d5) 35%,transparent);color:inherit}
.match-signal--high{border-color:color-mix(in srgb,#2f7d5d 45%,transparent);font-weight:600}
.match-signal--low{border-style:dashed}
.match-signal--muted{opacity:.75;border-color:color-mix(in srgb,currentColor 18%,transparent);background:transparent}

.close-call{margin:.4rem 0 1rem;padding:.85rem 1rem;border-left:3px solid var(--color-warning,#b5813a);
  background:color-mix(in srgb,var(--color-warning-soft,#f4e6cf) 40%,transparent);border-radius:.4rem}
.close-call h4{margin:0 0 .3rem;font-size:.95rem}
.close-call p{margin:0 0 .6rem;font-size:.92rem}
.close-call-actions{display:flex;flex-wrap:wrap;gap:.5rem}

.match-feedback{margin:.2rem 0 1.1rem}
.match-feedback__q{margin:0 0 .45rem;font-size:.9rem;font-weight:600}
.match-feedback__actions{display:flex;gap:.5rem;flex-wrap:wrap}
.match-feedback__note{margin:.5rem 0 0;font-size:.82rem;opacity:.75}
.match-feedback button[disabled]{opacity:.55;cursor:default}
@media (prefers-reduced-motion: no-preference){
  .close-call{animation:aiplanterSettle .35s ease-out both}
  @keyframes aiplanterSettle{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}