/* Quick Buttons, Navigation, Language Toggle, Compliance Filters & Responsive Media Queries */
/* Extracted from intake.html */

.quick-btn {
    padding: 8px 14px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-weight: 500;
    box-shadow: 0 8px 16px rgba(14, 20, 62, 0.08);
    backdrop-filter: blur(8px) saturate(140%);
}
.quick-btn:hover {
    background: rgba(0, 175, 210, 0.1);
    border-color: rgba(0, 175, 210, 0.45);
    transform: translateY(-1px);
}
#clear-quick-ask:hover {
    background: rgba(15, 23, 42, 0.08);
}
.quick-btn:focus {
    outline: 2px solid rgba(0, 175, 210, 0.35);
    outline-offset: 2px;
}
.quick-btn.recent-btn {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0, 175, 210, 0.3);
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    height: 36px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 16px rgba(8, 13, 30, 0.25);
    backdrop-filter: blur(6px);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-btn:hover {
    background: rgba(255,255,255,0.28);
    transform: translateY(-1px);
}
.nav-btn.primary {
    background: linear-gradient(135deg, rgba(0, 175, 210, 0.98), rgba(29, 188, 226, 0.96));
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 20px rgba(0, 143, 175, 0.35);
}
.nav-btn.primary:hover {
    background: linear-gradient(135deg, rgba(0, 187, 227, 1), rgba(36, 197, 236, 0.98));
}
.lang-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    height: 36px;
    align-items: center;
}
.lang-btn {
    background: transparent;
    color: #f3f6fb;
    padding: 6px 12px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}
.lang-btn.active {
    background: rgba(255,255,255,0.95);
    color: #0b1530;
    box-shadow: 0 6px 12px rgba(12, 19, 43, 0.25);
}
.quick-btn.recent-btn:hover {
    background: #0e143e;
    border-color: #0e143e;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.text-link {
    background: none;
    border: none;
    color: var(--link-color);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.text-link:hover {
    text-decoration: underline;
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.compliance-filter-btn {
    padding: 8px 14px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.compliance-filter-btn:hover {
    background: #e8e8e8;
}
.compliance-filter-btn.active {
    background: #e91e63;
    color: white;
    border-color: #e91e63;
}
.compliance-site-row {
    border-radius: 12px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.compliance-site-row:hover {
    background: rgba(14, 20, 62, 0.03);
    transform: translateX(2px);
}

/* ===== MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    /* Header adjustments */
    .top-bar {
        padding: 8px 12px;
        flex-wrap: wrap;
    }
    .top-bar .logo-text {
        font-size: 16px;
    }
    .top-bar .powered-by {
        display: none;
    }

    /* Container padding */
    .container {
        padding: 12px;
    }

    /* Header text */
    header h1 {
        font-size: 20px;
    }
    header h1::before {
        font-size: 22px;
    }
    header p {
        font-size: 13px;
    }

    /* Progress bar - hide step labels on mobile */
    .step-label {
        display: none;
    }
    .progress-bar {
        padding: 0 10px;
        margin-bottom: 20px;
    }
    .step-circle {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    /* Cards - reduce padding */
    .card {
        padding: 16px;
        border-radius: 10px;
    }
    .card h2 {
        font-size: 18px;
    }
    .context-item {
        grid-template-columns: 110px 1fr;
    }
    .chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .chip-row::-webkit-scrollbar {
        height: 6px;
    }
    .chip-row::-webkit-scrollbar-thumb {
        background: #d0d0d0;
        border-radius: 8px;
    }
    .search-row {
        flex-direction: column;
    }
    .primary-btn {
        width: 100%;
    }

    /* Option grid - single column */
    .option-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .option-card {
        padding: 14px;
    }
    .option-card .icon {
        font-size: 24px;
    }

    /* Buttons - larger touch targets for gloved hands */
    .btn, button {
        min-height: 48px;
        padding: 14px 18px;
        font-size: 15px;
    }

    /* Quick tool tabs */
    .quick-tool-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }
    .quick-tool-tabs button {
        flex: 1 1 45%;
        font-size: 12px;
        padding: 10px 8px;
        min-width: 0;
    }

    /* Wiring diagram tables - horizontal scroll */
    .wire-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wire-table {
        min-width: 600px;
        font-size: 12px;
    }
    .wire-table th, .wire-table td {
        padding: 8px 6px;
    }

    /* Result cards */
    .result-section {
        padding: 14px;
    }
    .result-section h3 {
        font-size: 15px;
    }
    .result-section p, .result-section li {
        font-size: 14px;
    }

    /* Diagnostic steps */
    .diagnostic-step {
        padding: 14px;
    }
    .step-options {
        flex-direction: column;
        gap: 8px;
    }
    .step-options button {
        width: 100%;
    }

    /* Form inputs - prevent zoom on focus */
    input[type="text"], textarea, select {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .wizard-shell { grid-template-columns: 1fr; }
    .top-bar-inner { grid-template-columns: 1fr; }
    .top-bar-center { order: 2; justify-self: center; }
    .top-bar-right { order: 3; justify-content: center; }
    .logo-section { justify-content: center; }
    .nav-group { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .top-bar .logo-section {
        gap: 8px;
    }
    .top-bar .logo-text {
        font-size: 14px;
    }

    header h1 {
        font-size: 18px;
        flex-direction: column;
        gap: 4px;
    }

    .card {
        padding: 14px;
    }
    .card h2 {
        font-size: 16px;
    }
    .card .hint {
        font-size: 13px;
    }

    /* Quick tool tabs - full width */
    .quick-tool-tabs button {
        flex: 1 1 100%;
    }

    /* Notification bell */
    .notification-bell {
        padding: 6px;
    }

    /* Language toggle */
    .lang-toggle {
        gap: 4px;
    }
    .lang-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    #quick-ask-input { font-size: 14px; padding: 12px; }
    .quick-btn { font-size: 12px; padding: 6px 10px; }
}

/* ===== ACCESSIBILITY: MINIMUM TOUCH TARGETS (WCAG 2.5.5) ===== */
@media (max-width: 768px) {
    button,
    [role="button"],
    .filter-chip,
    .quick-card,
    .tool-link,
    .side-menu-item,
    .nav-btn,
    .quick-btn,
    .wo-skip-btn,
    .compliance-filter-btn,
    input[type="submit"] {
        min-height: 44px;
    }

    /* Ensure filter chips have adequate tap area */
    .filter-chip {
        padding: 10px 16px;
    }

    /* Tool links need adequate height */
    .tool-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Side menu items need adequate height */
    .side-menu-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Touch-friendly tap highlights */
@media (hover: none) {
    .option-card:active,
    .btn:active,
    button:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* Language toggle active state */
.lang-btn.active {
    background: #00AFD2 !important;
    color: white !important;
}

/* ===== MOBILE EXPERIENCE ENHANCEMENTS ===== */

/* Bottom Sheet for mobile answer display */
@media (max-width: 768px) {
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        background: white;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        animation: slideUp 0.3s ease-out;
        z-index: 1000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .bottom-sheet-handle {
        width: 40px;
        height: 4px;
        background: #ccc;
        border-radius: 2px;
        margin: 12px auto;
    }

    /* Touch-optimized category cards */
    .category-card {
        min-height: 100px;
        padding: 16px !important;
    }

    .category-card:active {
        background: linear-gradient(135deg, rgba(0, 175, 210, 0.2) 0%, rgba(0, 175, 210, 0.1) 100%);
        transform: scale(0.97);
    }
}

/* H5 FIX: On mobile, answer section can grow indefinitely with no way to
   scroll just the answers. Cap its height and make it independently scrollable
   so the user can scroll through long answers without losing the search bar. */
@media (max-width: 768px) {
    #answer-section {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-padding-bottom: 48px;
    }
}

/* Vertical layout for very small screens */
@media (max-width: 380px) {
    .hero-grid {
        display: block;
    }

    .hero-panel {
        margin-bottom: 20px;
    }

    .search-row {
        flex-direction: column;
    }

    .btn-primary {
        width: 100%;
    }

    .input-actions {
        min-width: 120px;
    }
}