/* ============================================
   MOBILE & CHATBOT FIXES v2.0
   Advantage Tax Law - advantagetaxlaw.com
   Updated: April 3, 2026
   ============================================ */

/* -------------------------------------------
   GLOBAL: Prevent horizontal scroll on ALL devices
   ------------------------------------------- */
html {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Ensure all major containers respect viewport width */
.header-container,
.hero,
.stats-bar,
.practice-areas,
.why-section,
.hnw-section,
.process,
.final-cta,
.portal-container,
.lookup-container,
.insights-container,
footer,
.footer-content {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* -------------------------------------------
   INSIGHTS PAGE: Fix sticky header overlapping grid
   ------------------------------------------- */
#insightsGrid {
    padding-top: 120px !important;
}

.insights-header {
    background: linear-gradient(rgb(15, 23, 42) 0%, rgb(15, 23, 42) 90%, rgba(15, 23, 42, 0) 100%) !important;
    z-index: 51 !important;
    margin-bottom: 0 !important;
}

/* -------------------------------------------
   CHATBOT PANEL - Dark Theme Override
   ------------------------------------------- */

/* Match chatbot to site dark theme instead of white */
#atl-chat-panel {
    background: linear-gradient(135deg, #1a2332 0%, #0f1620 100%) !important;
    border: 1px solid rgba(201, 168, 76, 0.2) !important;
}

#atl-chat-panel .atl-messages {
    background: transparent !important;
}

/* Message bubbles */
#atl-chat-panel .atl-msg {
    color: #e0e0e0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
#atl-chat-panel .atl-msg.assistant {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(201, 168, 76, 0.1) !important;
}
#atl-chat-panel .atl-msg.user {
    background: rgba(201, 168, 76, 0.15) !important;
    color: #f0f0f0 !important;
}

/* Header bar of chatbot */
#atl-chat-panel .atl-header {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
}

/* Disclaimer / info text */
#atl-chat-panel .atl-disclaimer {
    color: #999 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
}

/* Quick prompt buttons */
#atl-chat-panel .atl-quick-prompts button {
    background: rgba(201, 168, 76, 0.1) !important;
    color: #c9a84c !important;
    border: 1px solid rgba(201, 168, 76, 0.25) !important;
}
#atl-chat-panel .atl-quick-prompts button:hover {
    background: rgba(201, 168, 76, 0.2) !important;
}

/* Input area */
#atl-chat-panel .atl-input-area {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(201, 168, 76, 0.1) !important;
}
#atl-chat-panel .atl-input-area input,
#atl-chat-panel #atl-input {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(201, 168, 76, 0.2) !important;
}
#atl-chat-panel .atl-input-area input::placeholder,
#atl-chat-panel #atl-input::placeholder {
    color: #888 !important;
}
#atl-chat-panel .atl-input-area button {
    color: #c9a84c !important;
}

/* Footer */
#atl-chat-panel .atl-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #666 !important;
    border-top: 1px solid rgba(201, 168, 76, 0.1) !important;
}
#atl-chat-panel .atl-footer a {
    color: #c9a84c !important;
}

/* Consultation form inside chatbot */
#atl-chat-panel .atl-consult-form input,
#atl-chat-panel .atl-consult-form select,
#atl-chat-panel .atl-consult-form textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(201, 168, 76, 0.2) !important;
}
#atl-chat-panel .atl-consult-form label {
    color: #ccc !important;
}

/* Timestamp text */
#atl-chat-panel .atl-time {
    color: #777 !important;
}

/* Request consultation button in chatbot */
#atl-chat-panel .atl-consult-toggle,
#atl-chat-panel button[onclick*="consult"],
#atl-chat-panel .atl-request-btn {
    background: rgba(201, 168, 76, 0.2) !important;
    color: #c9a84c !important;
    border: 1px solid rgba(201, 168, 76, 0.3) !important;
}

/* -------------------------------------------
   CHATBOT PANEL - Scrolling & Expansion Fixes
   ------------------------------------------- */

/* Make messages area scroll instead of overflow */
#atl-chat-panel .atl-messages {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for chatbot messages */
#atl-chat-panel .atl-messages::-webkit-scrollbar {
    width: 6px;
}
#atl-chat-panel .atl-messages::-webkit-scrollbar-track {
    background: transparent;
}
#atl-chat-panel .atl-messages::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.3);
    border-radius: 3px;
}
#atl-chat-panel .atl-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 168, 76, 0.5);
}

/* Ensure panel uses full flex column layout */
#atl-chat-panel {
    display: none;
    flex-direction: column !important;
    max-height: calc(100vh - 140px) !important;
}
#atl-chat-panel.open {
    display: flex !important;
}

/* Keep header, prompts, input from shrinking */
#atl-chat-panel .atl-header,
#atl-chat-panel .atl-disclaimer,
#atl-chat-panel .atl-quick-prompts,
#atl-chat-panel .atl-consult-toggle,
#atl-chat-panel .atl-consult-form,
#atl-chat-panel .atl-input-area,
#atl-chat-panel .atl-footer {
    flex-shrink: 0 !important;
}

/* Consultation form should scroll if too tall */
#atl-chat-panel .atl-consult-form {
    max-height: 300px;
    overflow-y: auto;
}

/* -------------------------------------------
   CHATBOT - Desktop Resize Handle
   ------------------------------------------- */
#atl-chat-panel {
    resize: vertical;
    min-height: 400px;
}


/* =============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================= */
@media (max-width: 1024px) {
    .header-container,
    .hero,
    .stats-bar,
    .practice-areas,
    .why-section,
    .hnw-section,
    .process,
    .final-cta,
    .portal-container,
    .lookup-container,
    .insights-container,
    .footer-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* =============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================= */

/* -------------------------------------------
   MOBILE: Chatbot full-screen on small screens
   ------------------------------------------- */
@media (max-width: 768px) {
    #atl-chat-btn {
        bottom: 16px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
        z-index: 99999 !important;
    }

    #atl-chat-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 100000 !important;
        resize: none !important;
    }

    #atl-chat-panel .atl-messages {
        flex: 1 1 0 !important;
        padding: 12px !important;
    }

    #atl-chat-panel .atl-header {
        border-radius: 0 !important;
        padding: 12px 16px !important;
    }

    #atl-chat-panel .atl-msg {
        max-width: 100% !important;
        font-size: 14px !important;
    }

    /* Consultation form full width on mobile */
    #atl-chat-panel .atl-consult-form {
        max-height: 50vh;
    }

    /* Quick prompts wrap nicely on mobile */
    #atl-chat-panel .atl-quick-prompts {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 12px !important;
    }
    #atl-chat-panel .atl-quick-prompts button {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* -------------------------------------------
   MOBILE: Header & Navigation
   ------------------------------------------- */
@media (max-width: 768px) {
    body {
        padding-top: 120px !important;
    }

    header {
        padding: 8px 12px !important;
    }

    .header-container {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .header-top-nav {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    /* Logo */
    .logo {
        font-size: 16px !important;
    }
    .logo-advantage,
    .logo-tax {
        font-size: 16px !important;
    }

    /* Nav links */
    .header-nav {
        gap: 8px !important;
        font-size: 10px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .header-nav a {
        font-size: 10px !important;
        padding: 4px 2px !important;
    }

    .header-nav .cta-button {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }
}

/* -------------------------------------------
   MOBILE: Tab Navigation - Horizontal Scroll
   ------------------------------------------- */
@media (max-width: 768px) {
    .tool-nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 8px !important;
    }

    .tool-nav::-webkit-scrollbar {
        display: none;
    }

    .tool-nav .tab-button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 10px 12px !important;
    }
}

/* -------------------------------------------
   MOBILE: Hero Section
   ------------------------------------------- */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr !important;
        padding: 20px 16px !important;
        gap: 20px !important;
    }

    .hero-left {
        max-width: 100% !important;
    }

    .hero h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .hero p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .badge {
        font-size: 11px !important;
    }

    .hero-cta {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-cta .btn-filled,
    .hero-cta .btn-outline {
        width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 14px 20px !important;
    }

    .hero-right {
        max-width: 100% !important;
    }

    .attorney-card {
        margin-top: 16px !important;
        padding: 20px !important;
    }
}

/* -------------------------------------------
   MOBILE: Stats Bar
   ------------------------------------------- */
@media (max-width: 768px) {
    .stats-bar {
        padding: 20px 16px !important;
    }

    .stats-bar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .stat-bar-value {
        font-size: 28px !important;
    }

    .stat-bar-label {
        font-size: 11px !important;
    }
}

/* -------------------------------------------
   MOBILE: Practice Areas, Why, HNW, Process
   ------------------------------------------- */
@media (max-width: 768px) {
    .practice-areas,
    .why-section,
    .hnw-section,
    .process,
    .final-cta {
        padding: 30px 16px !important;
    }

    .section-subtitle {
        font-size: 11px !important;
    }

    .section-title,
    .why-section h2,
    .hnw-section h2,
    .process-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .section-description,
    .process-description {
        font-size: 14px !important;
    }

    .practice-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .practice-card {
        padding: 20px !important;
    }

    .practice-card h4 {
        font-size: 16px !important;
    }

    .practice-card p {
        font-size: 13px !important;
    }

    /* Why section - single column */
    .why-section {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .why-left,
    .why-right {
        max-width: 100% !important;
    }

    .checklist-item h4 {
        font-size: 15px !important;
    }

    .checklist-item p {
        font-size: 13px !important;
    }

    .quote-card {
        padding: 20px !important;
    }

    .quote-text {
        font-size: 14px !important;
    }

    .stats-box-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* HNW section - single column */
    .hnw-section {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .hnw-left,
    .hnw-right {
        max-width: 100% !important;
    }

    .numbered-item {
        gap: 12px !important;
    }

    .numbered-item h4 {
        font-size: 15px !important;
    }

    .numbered-item p {
        font-size: 13px !important;
    }

    .feature-card {
        padding: 20px !important;
    }

    .feature-card h3 {
        font-size: 16px !important;
    }

    .feature-card p {
        font-size: 13px !important;
    }

    /* Process grid */
    .process-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .process-step {
        padding: 20px !important;
    }

    /* Final CTA */
    .final-cta h2 {
        font-size: 22px !important;
    }

    .final-cta p {
        font-size: 14px !important;
    }

    .final-cta-phone {
        font-size: 22px !important;
    }

    .final-cta .btn-filled {
        width: 100% !important;
        font-size: 13px !important;
        padding: 14px 20px !important;
    }
}

/* -------------------------------------------
   MOBILE: Footer
   ------------------------------------------- */
@media (max-width: 768px) {
    footer {
        padding: 30px 16px !important;
    }

    footer .footer-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }

    .footer-logo {
        justify-content: center !important;
    }

    .footer-description {
        font-size: 13px !important;
    }

    .footer-section h4 {
        font-size: 14px !important;
    }

    .footer-links a {
        font-size: 13px !important;
    }

    .footer-bottom {
        font-size: 11px !important;
        padding: 16px !important;
    }
}

/* -------------------------------------------
   MOBILE: Tax Court Portal Charts
   ------------------------------------------- */
@media (max-width: 768px) {
    .portal-container {
        padding: 20px 16px !important;
    }

    .portal-title {
        font-size: 22px !important;
    }

    .charts-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .chart-container,
    .chart-card {
        min-height: 220px !important;
        padding: 16px !important;
    }

    .chart-container h4 {
        font-size: 14px !important;
    }

    /* Cases section */
    .cases-filters {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .cases-filters input,
    .cases-filters select {
        width: 100% !important;
        font-size: 14px !important;
    }

    .trigger-cards {
        grid-template-columns: 1fr !important;
    }
}

/* -------------------------------------------
   MOBILE: Insights Article Grid
   ------------------------------------------- */
@media (max-width: 768px) {
    .insights-container {
        padding: 20px 16px !important;
    }

    .insights-title {
        font-size: 22px !important;
    }

    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .insights-header {
        flex-direction: column !important;
        gap: 12px !important;
        top: 120px !important;
    }

    .insights-header-inner {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .insights-search {
        flex-direction: column !important;
        gap: 8px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .insights-search input,
    .insights-search select {
        width: 100% !important;
        font-size: 14px !important;
    }

    .insights-cta h3 {
        font-size: 20px !important;
    }

    .insights-cta p {
        font-size: 14px !important;
    }
}

/* -------------------------------------------
   MOBILE: Article Overlay
   ------------------------------------------- */
@media (max-width: 768px) {
    .article-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .article-overlay-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        padding: 20px 16px !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }

    .article-overlay-card h1,
    .article-overlay-title {
        font-size: 22px !important;
    }

    .article-overlay-card p,
    .article-overlay-card li {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .article-overlay-close {
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
    }
}

/* -------------------------------------------
   MOBILE: Case Detail Overlay
   ------------------------------------------- */
@media (max-width: 768px) {
    .case-detail-overlay {
        padding: 0 !important;
    }

    .case-detail-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        padding: 20px 16px !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }

    .case-detail-close {
        top: 12px !important;
        right: 12px !important;
    }
}

/* -------------------------------------------
   MOBILE: Consultation Modal
   ------------------------------------------- */
@media (max-width: 768px) {
    .modal {
        padding: 16px !important;
        align-items: flex-start !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        margin-top: 20px !important;
    }

    .modal-content h2 {
        font-size: 20px !important;
    }

    .modal-content .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        width: 100% !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    .modal-content button[type="submit"],
    .modal-content .btn-filled {
        width: 100% !important;
        font-size: 14px !important;
        padding: 14px !important;
    }

    .modal-content .close-btn {
        top: 8px !important;
        right: 8px !important;
    }
}

/* -------------------------------------------
   MOBILE: Code & Form Lookup
   ------------------------------------------- */
@media (max-width: 768px) {
    .lookup-container {
        padding: 20px 16px !important;
    }

    .lookup-container h2 {
        font-size: 22px !important;
    }

    .search-section {
        padding: 16px !important;
    }

    .search-box {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .search-box input {
        width: 100% !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    .search-box button,
    .search-btn {
        width: 100% !important;
        padding: 12px !important;
    }

    /* Results cards */
    #results .result-card,
    #codeDetail {
        padding: 16px !important;
    }
}


/* =============================================
   SMALL PHONE BREAKPOINT (max-width: 380px)
   ============================================= */
@media (max-width: 380px) {
    body {
        padding-top: 110px !important;
    }

    .header-nav {
        gap: 4px !important;
    }

    .header-nav a {
        font-size: 9px !important;
    }

    .header-nav .cta-button {
        font-size: 9px !important;
        padding: 5px 8px !important;
    }

    .hero h1 {
        font-size: 22px !important;
    }

    .stats-bar-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-bar-value {
        font-size: 24px !important;
    }
}


/* =============================================
   LANDSCAPE MOBILE
   ============================================= */
@media (max-width: 768px) and (orientation: landscape) {
    body {
        padding-top: 100px !important;
    }

    .hero {
        padding: 16px !important;
    }

    .hero h1 {
        font-size: 24px !important;
    }

    #atl-chat-panel {
        max-height: 100vh !important;
    }
}


/* =============================================
   ACCESSIBILITY & TOUCH TARGETS
   ============================================= */
@media (max-width: 768px) {
    /* Ensure minimum tap target size (44px) */
    .tab-button,
    .btn-filled,
    .btn-outline,
    .cta-button,
    .search-btn,
    .footer-links a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Better text rendering on mobile */
    body {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* Prevent images from overflowing */
    img, video, canvas, svg {
        max-width: 100% !important;
        height: auto !important;
    }
}