:root {
    --bg-main: #0a0a0a; /* Ultra dark black */
    --bg-secondary: #121212;
    --card-bg: #1a1a1a;
    --text-main: #e0e0e0;
    --accent-orange: #d35400; /* Burned mockup orange */
    --border-color: #222;
    --light-bar: #d4d4d4;
}

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto:wght@300;400;700&display=swap');

html { scroll-padding-top: 100px; scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; background-color: var(--bg-main); color: var(--text-main); margin: 0; padding: 0; }
h1, h2, h3, h4, h5, .logo-name, .chat-header { font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; margin: 0; }
.wrapper { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

/* Mockup Header */
header { background-color: #000; border-bottom: 1px solid #111; padding: 15px 0; position: sticky; top: 0; z-index: 1000; }
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.brand-link { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 50px; border-radius: 50%; border: 1px solid var(--accent-orange); margin-right: 15px;}
.logo-text-stack { display: flex; flex-direction: column; }
.logo-name { font-size: 24px; font-weight: 700; color: #fff; line-height: 1; }
.logo-sub { font-size: 10px; color: #888; letter-spacing: 2px; font-family: 'Oswald', sans-serif;}
.moto-accent { color: var(--accent-orange); }

.center-nav { display: flex; gap: 30px; }
.center-nav a { color: #fff; text-decoration: none; font-size: 14px; font-family: 'Oswald', sans-serif; font-weight: 400; letter-spacing: 1px; transition: color 0.2s; }
.center-nav a:hover, .center-nav a.active { color: var(--accent-orange); }

.btn-outline { border: 1px solid var(--border-color); color: #fff; padding: 8px 16px; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1px; transition: border 0.2s; }
.btn-outline:hover { border-color: var(--accent-orange); }

/* Mockup Hero */
.hero-banner {
    background-color: #000;
    background-image: linear-gradient(to right, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.4) 100%), url('/static/images/hero-bg.jpeg');
    background-size: cover;
    background-position: center;
    padding: 120px 5%;
}
.hero-content.left-align { max-width: 600px; text-align: left; }
.hero-content h1 { font-size: 64px; color: #fff; line-height: 1.1; margin-bottom: 10px; }
.hero-subline { font-size: 18px; color: #fff; margin-bottom: 20px; letter-spacing: 1px; font-weight: 400; }
.hero-content p { font-size: 16px; color: #aaa; margin-bottom: 40px; line-height: 1.6; font-weight: 300; }

.hero-buttons { display: flex; gap: 15px; }
.btn-primary { background-color: var(--accent-orange); color: #fff; padding: 12px 24px; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1px; border-radius: 2px; }
.btn-outline-white { border: 1px solid #fff; color: #fff; padding: 12px 24px; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1px; border-radius: 2px; transition: background 0.2s; }
.btn-outline-white:hover { background-color: #fff; color: #000; }

/* Mockup Split Section */
.split-section { display: flex; width: 100%; flex-wrap: wrap; }
.split-card { flex: 1; min-width: 400px; display: flex; }
.parts-card { background-color: #161616; border-right: 1px solid #000; }
.service-card { background-color: #0d0d0d; }

.split-img { width: 40%; background-size: cover; background-position: center; min-height: 350px; opacity: 0.6; }
.split-text { width: 60%; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; }
.split-text h2 { font-size: 32px; color: #fff; margin-bottom: 5px; }
.split-sub { font-size: 14px; color: #888; margin-bottom: 25px; }

.check-list { list-style: none; padding: 0; margin: 0 0 30px 0; }
.check-list li { font-size: 14px; color: #ccc; margin-bottom: 12px; display: flex; align-items: center; }
.check-list li span { color: var(--accent-orange); margin-right: 10px; font-weight: bold; font-size: 16px; }

.btn-outline-orange { border: 1px solid var(--accent-orange); color: #fff; padding: 10px 20px; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px; display: inline-block; width: fit-content; border-radius: 2px; transition: background 0.2s; }
.btn-outline-orange:hover { background-color: var(--accent-orange); }

/* Mockup Feature Bar */
.feature-bar { background-color: var(--light-bar); display: flex; justify-content: space-around; flex-wrap: wrap; padding: 25px 5%; }
.feature-item { display: flex; align-items: center; gap: 15px; margin: 10px; }
.feature-icon { font-size: 32px; }
.feature-text h4 { font-family: 'Oswald', sans-serif; color: #000; font-size: 16px; margin: 0 0 2px 0; }
.feature-text p { font-family: 'Roboto', sans-serif; color: #444; font-size: 12px; margin: 0; }

/* AI Bay & Forms (Kept sleek) */
.chat-wrapper { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; }
.chat-header { background-color: #111; padding: 15px; border-bottom: 1px solid var(--border-color); color: var(--accent-orange); font-size: 18px; }
.chat-box { height: 400px; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; }
.msg-row { margin-bottom: 15px; display: flex; max-width: 85%; }
.msg-row.ai { align-self: flex-start; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.user-msg, .ai-msg, .error-msg { padding: 14px 20px; border-radius: 4px; margin: 0; line-height: 1.5; font-size: 15px; }
.user-msg { background-color: #333; color: white; }
.ai-msg { background-color: #222; border: 1px solid var(--border-color); }
.ai-msg p { margin: 0 0 10px 0; }
.ai-msg p:last-child { margin-bottom: 0; }
.input-area { display: flex; padding: 15px; background-color: #111; border-top: 1px solid var(--border-color); }
#user-input { flex-grow: 1; padding: 12px; background-color: #000; border: 1px solid var(--border-color); color: white; border-radius: 2px; margin-right: 10px; }
.input-area button { background-color: var(--accent-orange); color: white; border: none; padding: 12px 24px; font-weight: bold; border-radius: 2px; cursor: pointer; font-family: 'Oswald', sans-serif; letter-spacing: 1px;}
.btn-attach { background-color: transparent !important; border: none !important; font-size: 1.6rem; padding: 0 15px 0 5px !important; color: #888 !important; cursor: pointer; }

/* Mockup Footer */
.mockup-footer { background-color: #000; border-top: 1px solid #111; padding: 20px 5%; margin-top: 60px;}
.footer-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-left { display: flex; align-items: center; gap: 15px; }
.footer-center { display: flex; gap: 30px; }
.footer-center a { color: #888; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px; }
.footer-right { display: flex; gap: 20px; font-family: 'Oswald', sans-serif; color: #666; font-size: 13px; letter-spacing: 1px;}

/* Restored & Dark-Themed Services Grid */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; }
.service-card { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 30px; border-radius: 4px; line-height: 1.6; }
.service-card h3 { color: var(--accent-orange); margin-top: 0; font-size: 22px; margin-bottom: 15px;}
.service-card ul { padding-left: 15px; color: #ccc; }
.service-card li { margin-bottom: 8px; font-size: 14px; }

/* Restored & Dark-Themed Booking Form */
.booking-form-wrapper { background-color: var(--card-bg); padding: 40px; border-radius: 4px; border: 1px solid var(--border-color); max-width: 600px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.booking-form-wrapper label { display: block; margin-top: 20px; font-weight: bold; font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #888; letter-spacing: 1px;}
.booking-form-wrapper input, .booking-form-wrapper textarea { width: 100%; padding: 12px; margin-top: 8px; background-color: #0a0a0a; border: 1px solid var(--border-color); color: white; border-radius: 2px; box-sizing: border-box; font-family: 'Roboto', sans-serif;}
.booking-form-wrapper input:focus, .booking-form-wrapper textarea:focus { border-color: var(--accent-orange); outline: none; }
.booking-form-wrapper textarea { resize: vertical; }
.booking-form-wrapper button { background-color: var(--accent-orange); color: white; border: none; padding: 15px 20px; font-weight: bold; cursor: pointer; width: 100%; border-radius: 2px; margin-top: 25px; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 16px; letter-spacing: 1px;}
.booking-form-wrapper button:hover { background-color: #e65c00; }
#form-status { margin-top: 15px; font-weight: bold; text-align: center; }

/* --- MOBILE RESPONSIVENESS OVERRIDES --- */
@media screen and (max-width: 768px) {
    /* Stack Header & Navigation */
    header, .top-bar, .nav-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px;
    }
    
    nav, .menu {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    /* Force the Chat Bay to fit the screen */
    .chat-container, #chat-box, .diagnostic-bay {
        width: 100% !important;
        min-width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 0; /* Flat edges for mobile */
    }

    /* Make buttons and inputs touch-friendly */
    input, button, select, textarea {
        width: 100%;
        min-height: 48px; /* Apple/Google recommended touch target size */
        font-size: 16px !important; /* Forces iOS not to zoom in on click */
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    /* Keep images inside the lines */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Adjust oversized text */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
}

/* --- CHAT BOX MOBILE FIX --- */
@media screen and (max-width: 768px) {
    /* Target the container holding the input and buttons */
    .chat-container form, #chat-box form, .chat-input-wrapper {
        display: flex !important;
        flex-direction: row !important; /* Keep input and button on the same line */
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 5px;
    }

    /* Force the text entry line to stretch and take up the remaining space */
    .chat-container input[type="text"], #chat-box input[type="text"], .chat-container textarea {
        flex-grow: 1 !important; 
        width: auto !important; 
        min-height: 50px !important; /* Nice and tall for thumbs */
        padding: 12px !important;
        margin-bottom: 0 !important; /* Overrides the previous stacking margin */
        font-size: 16px !important; /* Prevents iOS auto-zoom */
        border-radius: 8px;
    }

    /* Keep the send/upload buttons from stretching across the screen */
    .chat-container button, #chat-box button, .chat-container label {
        width: auto !important;
        min-height: 50px !important;
        margin-bottom: 0 !important;
        padding: 10px 15px !important;
        flex-shrink: 0; /* Prevents the text box from crushing the button */
    }
}

/* --- MOBILE ATTACHMENT ICON FIX --- */
@media screen and (max-width: 768px) {
    /* Force the attachment label/icon to be a tight, compact square */
    .chat-container label, #chat-box label {
        min-width: 45px !important;
        width: 45px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-shrink: 0 !important; /* Prevents it from growing */
        overflow: hidden !important;
    }

    /* Hide the default HTML "Choose File" text if the browser is trying to show it */
    .chat-container input[type="file"], #chat-box input[type="file"] {
        display: none !important;
    }
    
    /* Force the text input to aggressively take all remaining space */
    .chat-container input[type="text"], #chat-box input[type="text"], .chat-container textarea {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
}

/* --- FINAL MOBILE CHAT FIX --- */
@media screen and (max-width: 768px) {
    /* 1. Force the row layout and prevent overflow */
    .chat-container form, #chat-box form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* 2. Lock the paperclip to a strict, small square */
    .chat-container label, #chat-box label {
        flex: 0 0 40px !important; /* Do not grow, do not shrink, stay 40px */
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 3. Force the Send button to only take the space it needs */
    .chat-container button, #chat-box button {
        flex: 0 0 auto !important; /* Do not grow, do not shrink, size to content */
        width: auto !important;
        padding: 10px 15px !important;
        margin: 0 !important;
    }

    /* 4. Let the text input aggressively fill the middle space */
    .chat-container input[type="text"], #chat-box input[type="text"] {
        flex: 1 1 auto !important; /* Grow to fill space */
        min-width: 0 !important; /* CRITICAL: Stops the buttons from crushing the input */
        width: 100% !important;
        margin: 0 !important;
    }
}