/* WTB.ai Portal Styles */

/* Header Styles */
.header-container {
    height: 60px;
    background: linear-gradient(90deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #333;
}

/* Sidebar Styles */
.sidebar-container {
    width: 180px;
    height: calc(100vh - 20px);
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    position: fixed;
    left: 10px;
    top: 10px;
    overflow-y: auto;
    transition: width 0.3s ease-in-out;
    z-index: 1000;
}

.sidebar-expanded {
    width: 180px !important;
}

.sidebar-collapsed {
    width: 60px !important;
}

.sidebar-collapsed .mantine-Button-label {
    display: none;
}

.sidebar-collapsed .mantine-Button-root {
    justify-content: center;
    padding: 8px;
}

.sidebar-collapsed .mantine-Button-leftSection {
    margin-right: 0;
}

.sidebar-title-visible {
    display: block !important;
}

.sidebar-title-hidden {
    display: none !important;
}

/* Main Content Styles */
.main-content-container {
    margin-left: 190px;
    padding: 24px;
    min-height: calc(100vh - 20px);
    background: #ffffff;
    transition: margin-left 0.3s ease-in-out;
    width: calc(100% - 190px);
}

.content-expanded {
    margin-left: 190px !important;
    width: calc(100% - 190px) !important;
}

.content-collapsed {
    margin-left: 70px !important;
    width: calc(100% - 70px) !important;
}

/* Hamburger Button Styles */
.hamburger-button {
    transform: scale(0.75);
}

/* Spacer Styles */
.spacer {
    flex: 1;
}

/* Search Bar / Project Dropdown Styles */
.search-bar {
    width: 500px;
    min-width: 500px;
}

/* Stats Card Styles */
.stats-card {
    min-height: 120px;
}

/* Chart Card Styles */
.chart-card {
    min-height: 300px;
}

/* Activity Card Styles */
.activity-card {
    min-height: 300px;
}

/* Page Header Styles */
.page-header {
    margin-bottom: 2rem;
}

/* Button Styles */
.action-button {
    margin-bottom: 0.5rem;
}

/* Icon Styles */
.icon-small {
    width: 16px;
}

.icon-medium {
    width: 20px;
}

.icon-large {
    width: 24px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .sidebar-container {
        width: 200px;
        left: 10px;
        top: 10px;
    }
    
    .main-content-container {
        margin-left: 210px;
        padding: 16px;
    }
    
    .search-bar {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .sidebar-container {
        width: 100%;
        position: relative;
        height: auto;
        left: 0;
        top: 0;
    }

    .main-content-container {
        margin-left: 0;
        padding: 12px;
    }

    .search-bar {
        width: 150px;
    }

    .header-container {
        height: 50px;
    }
}

/* ========================================
   TEASER MODE STYLES - SIMPLE VERTICAL CAROUSEL
   ======================================== */

/* Container - Fixed height, no scrolling */
.teaser-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
}

/* Container - no scrolling, just houses fixed elements */
.teaser-scroll-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0;
    z-index: 10;  /* Above hero image */
}

/* Positioning container - matches hero image dimensions */
.slogan-positioning-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vh * 0.75);  /* Match hero image width */
    width: 100%;
    height: 100vh;
    z-index: 15;
    pointer-events: none;
}

/* Reset default browser margins on headings inside slogans */
.slogan-item h1,
.slogan-item h2 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Slogan items - positioned relative to container */
.slogan-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
    /* Start hidden below screen */
    transform: translateY(100vh);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Each slogan has a fixed vertical position when visible */
.slogan-item:nth-child(1) {
    top: 8vh;
}

.slogan-item:nth-child(2) {
    top: 27vh;
}

.slogan-item:nth-child(3) {
    top: 38vh;
}

.slogan-item:nth-child(4) {
    top: 50vh;
}

/* Visible slogans - at their fixed positions */
.slogan-item.slogan-visible {
    transform: translateY(0);
}

/* Hidden above - slogans slide up off screen when terminal appears */
.slogan-item.slogan-hidden-above {
    transform: translateY(-200vh);
}

/* Above terminal - 4th slogan repositioned above chat */
.slogan-item.slogan-above-terminal {
    top: 15vh !important;
    transform: translateY(0);
}

/* Centered slogan above terminal needs special handling */
.slogan-align-center.slogan-above-terminal {
    transform: translateX(-50%) translateY(0);
}

/* Horizontal alignment variants - simple percentages relative to hero image */
.slogan-align-left {
    left: 10%;
    align-items: flex-start;
}

.slogan-align-right {
    right: 33%;
    align-items: flex-end;
}

.slogan-align-center-left {
    left: 15%;
    align-items: flex-start;
}

.slogan-align-center {
    left: 50%;
    transform: translateX(-50%) translateY(100vh);
    align-items: center;
}

/* Visible centered slogan needs special transform */
.slogan-align-center.slogan-visible {
    transform: translateX(-50%) translateY(0);
}

/* Individual slogan styles matching poster */

/* YO! - Big gold with red-orange outline */
.slogan-yo {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(2.5rem, 8vh, 10vh);  /* Scales with viewport height */
    font-weight: 900;
    font-style: italic;
    color: #FFD700;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-shadow:
        -4px -4px 0 #FF4500,
        4px -4px 0 #FF4500,
        -4px 4px 0 #FF4500,
        4px 4px 0 #FF4500,
        -6px -6px 0 #CC3300,
        6px -6px 0 #CC3300,
        -6px 6px 0 #CC3300,
        6px 6px 0 #CC3300,
        0 8px 15px rgba(0, 0, 0, 0.5);
    transform: skewY(-5deg);
}

/* GOT A PRODUCT IDEA? - Cyan with 3D shadow */
.slogan-product {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1rem, 3vh, 4vh);  /* Scales with viewport height */
    font-weight: 900;
    font-style: italic;
    color: #00CED1;
    text-transform: uppercase;
    margin: 0;
    text-shadow:
        -3px -3px 0 #008B8B,
        3px -3px 0 #008B8B,
        -3px 3px 0 #008B8B,
        3px 3px 0 #008B8B,
        0 6px 12px rgba(0, 0, 0, 0.4);
}

/* WANNA KNOW IF PEOPLE... - Gold with dark shadow */
.slogan-question-1 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.1rem, 3.5vh, 4.5vh);  /* Scales with viewport height */
    font-weight: 900;
    font-style: italic;
    color: #FFD700;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    text-shadow:
        -3px -3px 0 #8B4513,
        3px -3px 0 #8B4513,
        -3px 3px 0 #8B4513,
        3px 3px 0 #8B4513,
        0 0 20px rgba(255, 215, 0, 0.5);
}

.slogan-question-2 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.1rem, 3.5vh, 4.5vh);  /* Scales with viewport height */
    font-weight: 900;
    font-style: italic;
    color: #FFD700;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    text-shadow:
        -3px -3px 0 #8B4513,
        3px -3px 0 #8B4513,
        -3px 3px 0 #8B4513,
        3px 3px 0 #8B4513,
        0 6px 12px rgba(0, 0, 0, 0.5);
}

/* STOP GUESSIN', START TESTIN' - Soft coral pink italic */
.slogan-stop-1 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.2rem, 4vh, 5vh);  /* Scales with viewport height */
    font-weight: 900;
    font-style: italic;
    color: #FF69B4;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    text-shadow:
        -3px -3px 0 #C71585,
        3px -3px 0 #C71585,
        -3px 3px 0 #C71585,
        3px 3px 0 #C71585,
        0 0 20px rgba(255, 105, 180, 0.4);
}

.slogan-stop-2 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.2rem, 4vh, 5vh);  /* Scales with viewport height */
    font-weight: 900;
    font-style: italic;
    color: #FF69B4;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    text-shadow:
        -3px -3px 0 #C71585,
        3px -3px 0 #C71585,
        -3px 3px 0 #C71585,
        3px 3px 0 #C71585,
        0 6px 12px rgba(0, 0, 0, 0.5);
}

/* WillTheyBuy.ai - Gold with purple outline */
.slogan-brand {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.8rem, 6vh, 8vh);  /* Bigger - scales with viewport height */
    font-weight: 900;
    font-style: italic;
    color: #FFD700;
    text-transform: none;
    margin: 0;
    white-space: nowrap;
    text-shadow:
        -5px -5px 0 #663399,
        5px -5px 0 #663399,
        -5px 5px 0 #663399,
        5px 5px 0 #663399,
        0 8px 20px rgba(0, 0, 0, 0.3);
}

/* WillTheyBuy.ai subtitle - White with blue outline */
.slogan-brand-subtitle {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1rem, 3vh, 4vh);  /* Smaller than main brand */
    font-weight: 700;
    font-style: italic;
    color: #FFFFFF;
    text-transform: none;
    margin: 0.5rem 0 0 0;
    white-space: nowrap;
    text-shadow:
        -3px -3px 0 #0066FF,
        3px -3px 0 #0066FF,
        -3px 3px 0 #0066FF,
        3px 3px 0 #0066FF,
        0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Price badge - Starburst effect */
.price-badge {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFD700;
    border: 6px solid #9370DB;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    padding: 2rem;
    transform: rotate(-10deg);
    box-shadow:
        0 0 0 10px #FFD700,
        0 0 20px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.3);
}

.price-badge::before,
.price-badge::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFD700;
    border: 6px solid #9370DB;
    z-index: -1;
}

.price-badge::before {
    transform: rotate(30deg);
    border-radius: 50%;
}

.price-badge::after {
    transform: rotate(60deg);
    border-radius: 50%;
}

.price-amount {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    color: #8B4513;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
    line-height: 1;
}

.price-period {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #000;
    margin-top: 0.5rem;
}

/* Bottom slogan */
.slogan-bottom {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 4.5rem;
    font-weight: 900;
    font-style: italic;
    color: #FFD700;
    text-transform: uppercase;
    margin: 0.2rem 0;
    text-shadow:
        -3px -3px 0 #8B4513,
        3px -3px 0 #8B4513,
        -3px 3px 0 #8B4513,
        3px 3px 0 #8B4513,
        0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Terminal section - appears after all slogans */
.terminal-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 50vh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    z-index: 20;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Terminal visible - slides up from bottom */
.terminal-section.terminal-visible {
    transform: translateY(0);
}

/* Message history container - Fixed height, flex container */
.message-history-container {
    height: 50vh;
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    background: rgba(80, 80, 80, 0.50);
    backdrop-filter: blur(3px);
    border: 6px solid #b300b3;
    box-shadow: 0 0 30px rgba(179, 0, 179, 0.5);
    overflow: hidden;
}

/* Message history display - Scrollable area that grows upward */
#message-history-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 1rem;
}

.message-history-container.terminal-scroll {
    /* Fixed height, scroll for overflow */
    flex: 0 0 auto;
}

/* Message lines - terminal style */
.message-line {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 600;
    margin-bottom: 0.75rem;
    word-wrap: break-word;
}

.message-prefix {
    font-weight: bold;
}

.user-prefix {
    color: #00ffcc;
    text-shadow: 0 0 3px rgba(0, 255, 204, 0.3);
}

.agent-prefix {
    color: #ffd700;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
}

.system-prefix {
    color: #ff0066;
    text-shadow: 0 0 3px rgba(255, 0, 102, 0.3);
}

.message-text {
    color: #ffffff;
}

/* Input line - always at bottom */
.input-line {
    display: flex;
    align-items: center;
    padding-top: 1rem;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 22px;
    font-weight: 600;
    position: relative;
    flex-shrink: 0;  /* Don't shrink, stay at bottom */
}

.input-prefix {
    color: #00ffcc;
    text-shadow: 0 0 3px rgba(0, 255, 204, 0.3);
    font-weight: bold;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Cursor prompt ">" */
.cursor-prompt {
    color: #00ffcc;
    text-shadow: 0 0 3px rgba(0, 255, 204, 0.3);
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 22px;
    font-weight: bold;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Terminal input styling */
.terminal-input {
    flex: 1;
    background: transparent !important;
    border: 2px solid #00ffcc !important;
    border-radius: 4px !important;
    outline: none !important;
    color: #ffffff !important;
    font-family: 'Courier New', 'Consolas', monospace !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    padding: 8px !important;
    box-shadow: 0 0 3px rgba(0, 255, 204, 0.2) !important;
}

.terminal-input:focus {
    outline: none !important;
    border-color: #00ffcc !important;
    box-shadow: 0 0 5px rgba(0, 255, 204, 0.4) !important;
}

/* Bright white placeholder text */
.terminal-input::placeholder {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

.terminal-input::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

.terminal-input::-moz-placeholder {
    color: #ffffff !important;
    opacity: 0.8 !important;
}


/* Main content adjustments for teaser mode */
.main-content-container.teaser-mode {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Mobile layout - Responsive slogans */
@media (max-width: 768px) {
    /* Positioning container becomes full width on mobile */
    .slogan-positioning-container {
        max-width: 100vw;
    }

    /* Keep varied positioning on mobile - no centering override */
    /* Slogans maintain their left/right/center alignment */
    /* Font sizes now use fluid clamp() and scale automatically with vh */

    .price-badge {
        width: 200px;
        height: 200px;
    }

    .price-amount {
        font-size: 3rem;
    }

    .price-period {
        font-size: 1.5rem;
    }

    .slogan-bottom {
        font-size: 2.5rem;
    }

    .terminal-section {
        padding: 1rem;
    }

    .message-line {
        font-size: 20px;
    }

    .input-line {
        font-size: 20px;
    }

    .terminal-input {
        font-size: 20px !important;
    }

    .message-history-container {
        padding: 1rem;
        height: 40vh;
    }
}

/* Retro 90s theme accents */
.teaser-container {
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
}


/* Scrollbar styling - 90s style */
.message-history-container::-webkit-scrollbar {
    width: 12px;
}

.message-history-container::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
}

.message-history-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

.message-history-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Audio controls - Top right corner sticker */
.teaser-audio-controls {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1000;
}

/* Speaker sticker - infomercial style */
/* Hero image - full height, responsive */
.hero-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image {
    /* Show 25%-95% of image (70% total) centered at 60% mark */
    min-height: 100vh;
    height: 100vh;
    width: auto;
    max-width: none;
    /* object-fit: none means no scaling, just crop */
    /* We'll scale with height instead */
    object-fit: cover;
    /* Center at 60% mark vertically (middle of 25%-95% range) */
    /* Horizontal: center, Vertical: 60% from top */
    object-position: center 60%;
    /* Limit width: if showing 70% of height, max width = 100vh / 0.70 */
    /* Assuming roughly 3:4 aspect ratio for the image */
    max-width: calc(100vh * 0.75);
}

/* Portrait/Landscape image switching */
.hero-image-portrait {
    display: block;
}

.hero-image-landscape {
    display: none;
}

@media (orientation: landscape) {
    .hero-image-portrait {
        display: none;
    }

    .hero-image-landscape {
        display: block;
        /* Landscape image will be wider, so adjust max-width to fill more screen */
        max-width: 100vw;
    }
}

/* Portrait mode - increase terminal height by 20% */
@media (orientation: portrait) {
    .terminal-section {
        min-height: 60vh;  /* 50vh * 1.2 */
        max-height: 96vh;  /* 80vh * 1.2 */
    }

    .message-history-container {
        height: 60vh;  /* 50vh * 1.2 */
    }
}

.audio-sticker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border: 5px solid #FF4500;
    border-radius: 50%;
    box-shadow:
        0 0 0 8px #FFD700,
        0 0 30px rgba(255, 69, 0, 0.6),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    animation: pulseZoom 1.5s ease-in-out infinite;
    transition: transform 0.2s;
    width: 140px;
    height: 140px;
}

.audio-sticker:hover {
    transform: scale(1.05);
}

/* Stop animation when clicked (playing state) */
.audio-sticker.playing {
    animation: none;
}

/* Zoom in/out animation - infomercial style */
@keyframes pulseZoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* Speaker icon styling */
.audio-sticker svg {
    color: #FF4500;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* "LISTEN!" text */
.audio-sticker-text {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: #FF4500;
    text-transform: uppercase;
    text-shadow:
        -1px -1px 0 #FFF,
        1px -1px 0 #FFF,
        -1px 1px 0 #FFF,
        1px 1px 0 #FFF,
        0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* ========================================
   AGGRESSIVE MOBILE SCALING - BREAKPOINT 1
   Small tablets and large phones (< 500px)
   ======================================== */
@media (max-width: 500px) {
    /* Terminal section - reduce padding and height */
    .terminal-section {
        padding: 0.5rem;
        min-height: 40vh;
        max-height: 60vh;
    }

    /* Terminal visible - reduced height, stays at bottom */
    .terminal-section.terminal-visible {
        transform: translateY(0);
    }

    /* Message history container - reduce padding and borders */
    .message-history-container {
        padding: 1rem;
        border: 3px solid #b300b3;
        height: 35vh;
    }

    /* Message lines - +15% larger */
    .message-line {
        font-size: 18px;
    }

    /* Input line - +15% larger */
    .input-line {
        font-size: 18px;
    }

    .input-prefix,
    .cursor-prompt {
        font-size: 18px;
        margin-right: 0.25rem;
    }

    /* Terminal input - MUST be 16px minimum to prevent iOS zoom */
    .terminal-input {
        font-size: 16px !important;
        padding: 6px !important;
    }

    /* Audio sticker - first reduction (30% smaller - NOT changed) */
    .audio-sticker {
        width: 98px;
        height: 98px;
    }

    .audio-sticker svg {
        width: 28px;
        height: 28px;
    }

    .audio-sticker-text {
        font-size: 0.85rem;
    }

    /* Send button - show on mobile */
    #send-message-btn {
        display: flex !important;
    }

    /* Slogan font overrides for mobile - +15% larger again */
    .slogan-yo {
        font-size: 2.91rem !important;
    }

    .slogan-product {
        font-size: 1.32rem !important;
    }

    .slogan-question-1,
    .slogan-question-2 {
        font-size: 1.46rem !important;
    }

    .slogan-stop-1,
    .slogan-stop-2 {
        font-size: 1.59rem !important;
    }

    .slogan-brand {
        font-size: 2.19rem !important;
    }

    .slogan-brand-subtitle {
        font-size: 1.1rem !important;
    }
}

/* ========================================
   AGGRESSIVE MOBILE SCALING - BREAKPOINT 2
   Standard phones like iPhone 12/13/14 (< 390px)
   ======================================== */
@media (max-width: 390px) {
    /* Terminal section - more aggressive reduction */
    .terminal-section {
        padding: 0.25rem;
        min-height: 40vh;
        max-height: 60vh;
    }

    /* Message history container - tighter spacing */
    .message-history-container {
        padding: 0.75rem;
        border: 2px solid #b300b3;
        height: 35vh;
    }

    /* Message lines - +15% larger */
    .message-line {
        font-size: 16px;
    }

    /* Input line - +15% larger */
    .input-line {
        font-size: 16px;
    }

    .input-prefix,
    .cursor-prompt {
        font-size: 16px;
        margin-right: 0.25rem;
    }

    /* Terminal input - MUST be 16px minimum to prevent iOS zoom */
    .terminal-input {
        font-size: 16px !important;
        padding: 5px !important;
    }

    /* Audio sticker - second reduction (NOT changed) */
    .audio-sticker {
        width: 84px;
        height: 84px;
    }

    .audio-sticker svg {
        width: 24px;
        height: 24px;
    }

    .audio-sticker-text {
        font-size: 0.72rem;
    }

    /* Slogan font overrides - +15% larger again */
    .slogan-yo {
        font-size: 2.52rem !important;
    }

    .slogan-product {
        font-size: 1.2rem !important;
    }

    .slogan-question-1,
    .slogan-question-2 {
        font-size: 1.32rem !important;
    }

    .slogan-stop-1,
    .slogan-stop-2 {
        font-size: 1.46rem !important;
    }

    .slogan-brand {
        font-size: 1.85rem !important;
    }

    .slogan-brand-subtitle {
        font-size: 0.93rem !important;
    }
}

/* ========================================
   AGGRESSIVE MOBILE SCALING - BREAKPOINT 3
   Compact phones like iPhone SE (< 375px)
   ======================================== */
@media (max-width: 375px) {
    /* Terminal section - minimal padding, smaller height */
    .terminal-section {
        padding: 0.25rem;
        min-height: 40vh;
        max-height: 60vh;
    }

    /* Message history container - minimal spacing */
    .message-history-container {
        padding: 0.5rem;
        border: 2px solid #b300b3;
        height: 35vh;
    }

    /* Message lines - +15% larger */
    .message-line {
        font-size: 14px;
    }

    /* Input line - +15% larger */
    .input-line {
        font-size: 14px;
    }

    .input-prefix,
    .cursor-prompt {
        font-size: 14px;
        margin-right: 0.2rem;
    }

    /* Terminal input - MUST be 16px minimum to prevent iOS zoom */
    .terminal-input {
        font-size: 16px !important;
        padding: 4px !important;
    }

    /* Audio sticker - smallest size (NOT changed) */
    .audio-sticker {
        width: 73px;
        height: 73px;
    }

    .audio-sticker svg {
        width: 21px;
        height: 21px;
    }

    .audio-sticker-text {
        font-size: 0.64rem;
    }

    /* Slogan font overrides - +15% larger again */
    .slogan-yo {
        font-size: 2.19rem !important;
    }

    .slogan-product {
        font-size: 1.06rem !important;
    }

    .slogan-question-1,
    .slogan-question-2 {
        font-size: 1.2rem !important;
    }

    .slogan-stop-1,
    .slogan-stop-2 {
        font-size: 1.32rem !important;
    }

    .slogan-brand {
        font-size: 1.73rem !important;
    }

    .slogan-brand-subtitle {
        font-size: 0.87rem !important;
    }
}

/* Send button styling - hidden on desktop, visible on mobile */
#send-message-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    margin-left: 0.5rem;
    background: #00ffcc;
    border: 2px solid #00ffcc;
    border-radius: 4px;
    color: #000;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

#send-message-btn:hover {
    background: #00e6b8;
    border-color: #00e6b8;
}

#send-message-btn:active {
    transform: scale(0.95);
}