/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

/* Sofistic Style for Taskpane - Complete Design System */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0e2f24 0%, #1abc9c 100%);
    color: #fff;
    overflow-x: hidden;
}

/* Main Container Styling */
#app-body {
    max-width: 480px;
    margin: 24px auto;
    background: rgba(20, 40, 34, 0.97);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(16, 54, 39, 0.25);
    padding: 32px 28px 36px 28px;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(26, 188, 156, 0.2);
    min-height: calc(100vh - 48px);
    box-sizing: border-box;
}

/* Header Section */
#sofistic-header {
    width: 100%;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(26, 188, 156, 0.3);
}

#sofistic-logo {
    height: 52px;
    width: auto;
    display: block;
    margin-bottom: 16px;
    filter: drop-shadow(0 2px 8px rgba(26,188,156,0.3));
    transition: transform 0.2s ease;
}

#sofistic-logo:hover {
    transform: scale(1.05);
}

.sofistic-title {
    color: #1abc9c;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-shadow: 0 2px 12px rgba(26,188,156,0.4);
    margin-bottom: 0.3em;
    margin-top: 0.2em;
    text-align: center;
    width: 100%;
    font-size: 2.4em;
    box-sizing: border-box;
    line-height: 1.1;
}

/* Typography */
h1, h2, h3 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 18px;
    text-align: center;
}

/* Description Text */
#validate-desc {
    color: #e8f5f0;
    font-size: 1.1em;
    line-height: 1.5;
    text-align: center;
    margin: 24px 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Notification Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Primary Button Styling */
#validate-button {
    background: linear-gradient(135deg, #1abc9c 0%, #27ae60 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px 40px;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 20px rgba(39,174,96,0.25);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 24px 0 20px 0;
    outline: none;
    text-transform: uppercase;
    position: relative;
    overflow: visible; /* allow injected card to be fully visible instead of clipped */
}

#validate-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

#validate-button:hover:before {
    left: 100%;
}

#validate-button:hover, #validate-button:focus {
    background: linear-gradient(135deg, #16a085 0%, #2ecc71 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(39,174,96,0.35);
}

#validate-button:active {
    transform: translateY(-1px) scale(1.02);
}

#validate-button:disabled {
    background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 3px 10px rgba(127,140,141,0.2);
}

/* Results Area */
#results {
    background: linear-gradient(135deg, #f8fffe 0%, #e8fdf5 100%);
    border-radius: 16px;
    box-shadow: 0 6px 30px rgba(39,174,96,0.12);
    padding: 32px;
    margin-top: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2c3e50;
    min-height: 140px;
    transition: all 0.3s ease;
    border: 2px solid rgba(26, 188, 156, 0.2);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#results:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1abc9c, #27ae60, #1abc9c);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

#results pre {
    background: rgba(26, 188, 156, 0.05);
    border: 1px solid rgba(26, 188, 156, 0.2);
    border-radius: 8px;
    padding: 16px;
    font-size: 0.95em;
    color: #2c3e50;
    overflow-x: auto;
    margin-top: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

#results p {
    color: #27ae60;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 1.1em;
    letter-spacing: 0.3px;
}

#results h4 {
    color: #1abc9c;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.3em;
}

/* Loading Spinner */
.loader {
    border: 4px solid rgba(26, 188, 156, 0.2);
    border-top: 4px solid #1abc9c;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1.2s linear infinite;
    margin: 24px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Status Indicators */
.status-success {
    color: #27ae60 !important;
    background: rgba(39, 174, 96, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #27ae60;
}

.status-error {
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #e74c3c;
}

.status-warning {
    color: #f39c12 !important;
    background: rgba(243, 156, 18, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #f39c12;
}

/* Fluent UI Integration */
.ms-welcome__main {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    padding: 20px;
    color: #fff;
}

.ms-welcome__header {
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 40px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.ms-welcome__main > h2 {
    width: 100%;
    text-align: center;
}

/* Button States */
.ms-Button.ms-Button--primary {
    background: linear-gradient(135deg, #1abc9c 0%, #27ae60 100%);
    border: none;
    border-radius: 12px;
}

.ms-Button.ms-Button--primary:hover {
    background: linear-gradient(135deg, #16a085 0%, #2ecc71 100%);
}

/* Responsive Design */
@media (max-width: 480px) {
    #app-body {
        margin: 12px;
        padding: 24px 20px;
        max-width: none;
        min-height: calc(100vh - 24px);
    }
    
    .sofistic-title {
        font-size: 2em;
        letter-spacing: 0.8px;
    }
    
    #validate-button {
        padding: 14px 32px;
        font-size: 1.1em;
    }
    
    #results {
        padding: 24px 20px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for accessibility */
#validate-button:focus {
    outline: 2px solid rgba(26, 188, 156, 0.8);
    outline-offset: 2px;
}

/* Hide sideload message when app is loaded */
#sideload-msg {
    display: none;
}

/* Additional utility classes */
.text-center { text-align: center; }
.mb-2 { margin-bottom: 16px; }
.mt-2 { margin-top: 16px; }

/* Typography enhancements */
ul {
    margin: 0;
    padding: 0;
    color: #2c3e50;
}

b, strong {
    font-weight: 600;
    color: inherit;
}

/* AI Result Card injected via showAIResultPanel */
.ai-result-card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* Result card refinements */
.ai-card {
        width: 100%;
        max-width: 820px;
        border-radius: 12px;
        padding: 18px;
        box-shadow: 0 8px 30px rgba(44,62,80,0.06);
        background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
        color: #1f2d2a;
}

.ai-header { margin-bottom: 12px; }

.ai-badge { display:flex; align-items:center; gap:12px; }
.ai-badge-inner { display:flex; align-items:center; gap:12px; }
.ai-status-text-small { font-size:0.95em; color:#2c3e50; font-weight:700; }

.ai-title { font-size:1.4em; font-weight:800; color:#0b5e4a; }
.ai-subtitle { font-size:0.95em; color:#236153; margin-top:2px; }

.ai-motivo { margin-top:12px; padding:12px; border-radius:8px; background:#fff; border:1px solid rgba(34, 139, 116, 0.06); }
.ai-motivo strong { display:block; margin-bottom:8px; color:#0b4f3f; }
.ai-motivo-text { color:#324b45; }

.ai-validations { margin-top:12px; background:transparent; }
.ai-validations table td {
    vertical-align: top;
    white-space: nowrap;
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: normal;
    cursor: pointer;
}

.ai-analysis { margin-top:12px; }
.ai-analysis ul { list-style: disc; padding-left: 20px; color:#2f4b45; }

.ai-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.btn-blue { background: linear-gradient(135deg,#0ea37f 0%,#1abc9c 100%); color: white; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700; }
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26, 188, 156, 0.16); }
.btn-secondary { background: #f6f6f6; color: #234; border:1px solid rgba(34,62,60,0.06); padding:8px 12px; border-radius:8px; cursor:pointer; }

.ai-detail-panel { margin-top:12px; }
.ai-summary.hidden, .ai-raw.hidden, #ai-audit-raw.hidden { display:none; }
.ai-summary { transition: all 0.18s ease; }
.ai-raw, #ai-audit-raw { white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; border-radius:8px; padding:12px; background:#fff; border:1px solid rgba(34,62,60,0.04); }

/* Make results area expand to contain large cards */
#results { overflow: visible; }

@media (max-width: 720px) {
    .ai-card { padding: 12px; }
    .ai-title { font-size: 1.15em; }
    .ai-badge-inner { gap:8px; }
}

/* Notification styles moved from inline to CSS for consistency and animations */
.notif {
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid transparent;
    box-sizing: border-box;
    animation: notif-fade-in 240ms ease;
}
.notif-hide { animation: notif-fade-out 220ms ease forwards; opacity:0; transform: translateY(-6px); }
.notif-header { display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:6px; }
.notif-icon { font-weight:800; }
.notif-body { white-space:pre-wrap; margin-top:2px; }
.notif-actions { text-align:right; margin-top:8px; }
.notif-close { background:transparent; border:none; cursor:pointer; font-weight:700; padding:6px 8px; border-radius:6px; }

/* type variants */
.notif-error { background:#f8d7da; border-color:#f5c6cb; color:#721c24; }
.notif-error .notif-close { color:#721c24; }
.notif-warning { background:#fff3cd; border-color:#ffeaa7; color:#856404; }
.notif-warning .notif-close { color:#856404; }
.notif-success { background:#d4edda; border-color:#c3e6cb; color:#155724; }
.notif-success .notif-close { color:#155724; }
.notif-info { background:#d1ecf1; border-color:#bee5eb; color:#0c5460; }
.notif-info .notif-close { color:#0c5460; }

@keyframes notif-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes notif-fade-out { to { opacity: 0; transform: translateY(-6px); } }

/* Card base */
.ai-card {
        background: #fff;
        border-radius: 12px;
        padding: 12px 14px 18px 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        position: relative;
        overflow: visible;
        width: 100%;
        max-width: 420px;
}

/* Badge & status box */
.ai-badge {
    position: absolute;
    left: -18px;
    top: -18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-badge .ok-box {
    width: 58px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #065f46;
    background: linear-gradient(180deg, #eaffef 0%, #d7ffea 100%);
    box-shadow: 0 8px 18px rgba(34,197,94,0.12);
    font-size: 13px;
}
.ai-badge .ok-box.success {
    color: #ffffff;
    background: linear-gradient(180deg,#10b981 0%,#059669 100%);
    box-shadow: 0 8px 20px rgba(16,185,129,0.16);
}
.ai-badge .ok-box.warning {
    color: #ffffff;
    background: linear-gradient(180deg,#f59e0b 0%,#d97706 100%);
    box-shadow: 0 8px 18px rgba(245,158,11,0.12);
}
.ai-badge .ok-box.error {
    color: #ffffff;
    background: linear-gradient(180deg,#ef4444 0%,#dc2626 100%);
    box-shadow: 0 8px 20px rgba(239,68,68,0.18);
}

/* status text color depends on badge status */
.ai-badge.success .ai-status-text { color: #065f46; font-weight:700; }
.ai-badge.warning .ai-status-text { color: #92400e; font-weight:700; }
.ai-badge.error .ai-status-text { color: #7f1d1d; font-weight:700; }

/* New stacked inner layout for badge */
.ai-badge-inner { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ai-status-text-small { font-weight:700; color:#065f46; font-size:12px; }
.ai-badge.success .ai-status-text-small { color:#065f46; }
.ai-badge.warning .ai-status-text-small { color:#92400e; }
.ai-badge.error .ai-status-text-small { color:#7f1d1d; }

/* Card tint per status to match original design semantics */
.ai-card.status-success { background: linear-gradient(180deg,#f0fff6,#ffffff); }
.ai-card.status-warning { background: linear-gradient(180deg,#fffaf0,#ffffff); }
.ai-card.status-error { background: linear-gradient(180deg,#fff6f6,#ffffff); }


/* Card base (fine-tune) */
.ai-card {
        background: #fff;
        border-radius: 12px;
        padding: 12px 14px 18px 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        position: relative;
        overflow: visible;
        width: 100%;
        max-width: 420px;
}

/* Badge & status box */
.ai-badge {
    position: absolute;
    left: -18px;
    top: -18px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateZ(0);
}
.ai-badge .ok-box {
    width: 58px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #065f46; /* dark green text by default */
    background: linear-gradient(180deg, #eaffef 0%, #d7ffea 100%);
    box-shadow: 0 8px 18px rgba(34,197,94,0.12);
    font-size: 13px;
}
.ai-badge .ok-box.warning {
    color: #92400e;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 8px 18px rgba(245,158,11,0.12);
}
.ai-badge .ok-box.error {
    color: #7f1d1d;
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
    box-shadow: 0 8px 18px rgba(239,68,68,0.12);
}
.ai-badge .ai-status-text {
    font-weight:700;
    margin-left:6px;
    color: #064e3b;
}

/* Title */
.ai-title { font-size: 14px; font-weight:800; color:#0f172a; margin-bottom:4px; }
.ai-subtitle { color:#065f46; font-weight:700; font-size:12px; }

/* Motivo */
.ai-motivo { margin-top:10px; background:#f6fffb; padding:10px; border-radius:8px; color:#0f172a; }
.ai-motivo-text { margin-top:8px; color:#334155; }

/* Actions */
.ai-actions { margin-top:12px; display:flex; gap:10px; }
.btn-blue { background: linear-gradient(180deg,#1d4ed8,#2563eb); color:white; border:none; padding:10px 12px; border-radius:8px; cursor:pointer; box-shadow:0 6px 12px rgba(37,99,235,0.18); font-weight:700; }
.btn-blue:active{ transform: translateY(1px); }

/* Detail panel */
.ai-detail-panel { margin-top:12px; }
.ai-summary { font-size:13px; color:#0f172a; }
.ai-raw { background:#f3f4f6; padding:12px; border-radius:8px; max-height:220px; overflow:auto; font-size:12px; }

/* Loading card tweaks */
.loading-card { background: linear-gradient(180deg,#f8fff8,#ffffff); border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(2,6,23,0.06); }
.loading-bar-bg { background:#eefaf1; border-radius:999px; height:10px; overflow:hidden; }
.loading-bar-fill { background: linear-gradient(90deg,#34d399,#10b981); height:10px; width:0; transition:width 420ms ease; border-radius:999px; }
.results-submessage { margin-top:8px; color:#065f46; font-weight:600; }

/* AI result detailed card styling to match previous design */
.ai-card {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(180deg, #ffffff, #f6fffb);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(26,188,156,0.08);
    box-sizing: border-box;
}

.ai-card .ai-header {
    display:flex;
    align-items:center;
    gap:12px;
}

.ai-badge {
    min-width:72px;
    min-height:72px;
    border-radius:12px;
    background:#e9fff0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#128a4a;
    font-weight:800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.ai-badge .ok-box {
    background:#ffffff;
    border-radius:8px;
    padding:6px 8px;
    color:#128a4a;
    font-weight:800;
    display:inline-block;
    margin-bottom:6px;
}

.ai-status-text { color:#128a4a; font-weight:800; }

.ai-motivo {
    margin-top:12px;
    background:#f0fff6;
    border-radius:10px;
    padding:10px;
    color:#2c3e50;
    border:1px solid rgba(26,188,156,0.08);
}

.ai-actions { display:flex; gap:12px; margin-top:12px; }
.ai-actions .btn-blue {
    background: linear-gradient(180deg,#0b78d1,#0a66c2);
    color:white; padding:10px 14px; border-radius:8px; border:none; cursor:pointer; flex:1;
    box-shadow: 0 6px 18px rgba(10,102,194,0.18);
}

.ai-meta { margin-top:12px; font-size:0.9em; color:#2c3e50; background:transparent; }
.ai-meta p { margin:6px 0; }

.ai-raw { margin-top:12px; background:#f8f9fb; border-radius:8px; padding:10px; border:1px solid rgba(0,0,0,0.04); max-height:220px; overflow:auto; font-family:monospace; font-size:0.85em; color:#2c3e50; }

.ai-card.show { animation: slideIn 300ms ease both; }

.ai-result-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}

.ai-result-card .ai-status-bar {
    padding: 18px;
    display:flex;
    gap:12px;
    align-items:center;
}

.ai-result-card .ai-status-icon {
    width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:700;
}

.ai-result-card .ai-body {
    padding:14px; background:transparent;
}

.ai-result-card .ai-failure-box {
    background:#fff5f6; border:1px solid #ffced6; border-radius:8px; padding:12px; color:#7a2b2b;
}

.ai-result-card .ai-actions {
    margin-top:14px; display:flex; gap:10px; align-items:center;
}

.ai-result-card .ai-actions .primary {
    background:#007acc; color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700;
}

.ai-raw-container, pre#ai-raw-block {
    background:#f5f5f5; padding:10px; border-radius:6px; max-height:220px; overflow:auto; margin-top:10px; font-family: 'Consolas', 'Monaco', monospace; color:#2c3e50;
}

/* Enhanced loading card & progress visuals to match target UX */
.loading-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(180deg,#ffffff,#f6fffb);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    border: 1px solid rgba(26,188,156,0.08);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.loading-card .loading-inner { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }
.loading-title { font-weight:800; color:#2c3e50; font-size:1.05em; }
.loading-progress-wrap { width:100%; }
.loading-bar-bg { height:12px; background:rgba(0,0,0,0.05); border-radius:10px; overflow:hidden; }
.loading-bar-fill { height:100%; background: linear-gradient(90deg,#1abc9c,#27ae60); width:0%; transition: width 700ms cubic-bezier(0.2,0.9,0.2,1); box-shadow: 0 6px 18px rgba(39,174,96,0.12); }
.results-submessage { font-size:0.95em; color:#2c3e50; margin-top:8px; text-align:center; opacity:1; transition: opacity 260ms ease; }
.results-submessage.fade-in { opacity:0; animation: captionFade 480ms ease forwards; }
@keyframes captionFade { 0% { opacity:0; transform: translateY(6px); } 100% { opacity:1; transform: translateY(0); } }

/* Center wrapper tweak so card sits visually like screenshot */
.ai-result-card-wrapper { display:flex; justify-content:center; padding: 18px 0 28px 0; }
.ai-card { position: relative; }
/* Align badge and title: move badge slightly down and give the title more left margin so both appear vertically centered */
.ai-badge { position: absolute; left: 12px; top: 8px; transform: translateY(0); width:84px; height:84px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.ai-card .ai-title-wrap { margin-left: 112px; padding-top:6px; }
.ai-title { font-weight:900; font-size:1.05em; color:#0d6b42; }
.ai-subtitle { color:#2c3e50; margin-top:6px; }
.ai-motivo { margin-top:14px; }
.ai-highlight { box-shadow: 0 12px 30px rgba(38,166,91,0.14); transform: translateY(-2px); transition: box-shadow 160ms ease, transform 160ms ease; }

/* Slightly larger OK box style */
.ai-badge .ok-box { background:#1abc9c; color:#fff; padding:8px 10px; border-radius:10px; font-weight:900; box-shadow: 0 6px 18px rgba(26,188,156,0.16); }
.ai-badge .ai-status-text { font-size:0.9em; margin-top:6px; color:#0b6b3b; }

/* Respect reduced motion while keeping transitions */
@media (prefers-reduced-motion: reduce) {
    .loading-bar-fill { transition: none !important; }
    .results-submessage { transition: none !important; }
}

/* Utility hidden helper used by JS toggles */
.hidden { display: none !important; }

/* Additional status-specific adjustments to ensure badge contrasts and alignment match design */
.ai-card.status-success .ai-badge { background: linear-gradient(180deg,#e9fff0,#e6fff4); color: #065f46; }
.ai-card.status-success .ai-badge .ok-box { background: linear-gradient(180deg,#10b981 0%,#059669 100%); color:#fff; box-shadow: 0 8px 20px rgba(16,185,129,0.12); }
.ai-card.status-success .ai-title { color: #065f46; }

.ai-card.status-warning .ai-badge { background: linear-gradient(180deg,#fff9ed,#fff4e6); color: #92400e; }
.ai-card.status-warning .ai-badge .ok-box { background: linear-gradient(180deg,#f59e0b 0%,#d97706 100%); color:#fff; box-shadow: 0 8px 18px rgba(245,158,11,0.12); }
.ai-card.status-warning .ai-title { color: #92400e; }

.ai-card.status-error .ai-badge { background: linear-gradient(180deg,#fff1f2,#ffe9ea); color: #7f1d1d; }
.ai-card.status-error .ai-badge .ok-box { background: linear-gradient(180deg,#ef4444 0%,#dc2626 100%); color:#fff; box-shadow: 0 8px 20px rgba(239,68,68,0.18); }
.ai-card.status-error .ai-title { color: #7f1d1d; }

@media (max-width:420px) {
    .ai-card .ai-title-wrap { margin-left: 84px; }
    .ai-badge { left: 8px; top: -16px; width:72px; height:72px; }
    .ai-badge .ok-box { width:48px; height:36px; font-size:12px; }
}

/* Normalize layout across verdict statuses (ensure RECHAZADO matches APROBADO layout) */
.ai-card .ai-title-wrap { margin-left: 112px !important; padding-top: 6px !important; }
.ai-badge { left: 12px !important; top: 8px !important; width:84px !important; height:84px !important; }
.ai-badge .ok-box { padding: 8px 10px !important; border-radius:10px !important; }
.ai-actions { padding: 0 12px !important; box-sizing: border-box; }
.ai-card { padding: 16px !important; }

/* Layout tweak: ensure action buttons don't touch card edge and are nicely centered
   - each button uses ~50% width with gap
   - add horizontal padding to the actions container so buttons don't overlap the card border
   - placed near the end so it overrides earlier, more generic rules
*/
.ai-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 0 16px;
    box-sizing: border-box;
    justify-content: center; /* center the button group */
    align-items: stretch;
    flex-wrap: wrap; /* allow wrapping on very small screens */
}
.ai-actions .btn-blue {
    /* size to content rather than forcing 50% width */
    flex: 0 0 auto;
    min-width: 110px; /* ensure tappable size */
    max-width: none;
    padding: 12px 18px; /* give more horizontal room so text can wrap cleanly */
    white-space: normal; /* allow wrapping */
    text-align: center;
}
@media (max-width:420px) {
    .ai-actions { justify-content: center; }
    .ai-actions .btn-blue { width: 100%; min-width: 0; }
}