/* gulu-extra.css — consolidated from inline <style> blocks in index.php.
 * Blocks are concatenated in original document order. Load this AFTER
 * gulu-core.css and gulu-mobile.css so cascade priority matches the
 * original (inline blocks were last in document order). */

/* ===== block #1 ===== */
    
    .modal-backdrop {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: none;
}
    
    #stockModal {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: none;
}



.style-modal-content {
    position: relative;
    z-index: 10000;
    pointer-events: auto;
    max-height: 95vh;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .style-modal-content {
        width: 95%;
        margin: 0px auto;
        padding: 1.5rem;
    }
}

                     
                                
    

/* ===== block #2 ===== */
/* Cyberpunk effects */
.analysispattern-icon {
    position: relative;
    overflow: hidden;
}

.analysispattern-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: analysispattern-shine 3s infinite;
}

/* Icon base styles */
/* Icon base styles */
.analysis-icon {
    position: relative;
    transition: all 0.3s ease !important;
    border: none !important; /* Start with no border */
    box-shadow: none !important; /* Start with no shadow */
    background: rgba(255, 255, 255, 0.03) !important; /* Subtle default background */
}

/* Detective - Blue */
.analysis-icon[onclick*="detective"] {
    transition: all 0.3s ease !important;
}

.analysis-icon[onclick*="detective"].selected {
    border: 1px solid rgba(59,130,246,0.3) !important;
    box-shadow: 0 4px 20px rgba(59,130,246,0.15) !important;
    transform: scale(1.05) !important;
    background: rgba(59,130,246,0.1) !important;
}

/* Chartist - Pink */
.analysis-icon[onclick*="chartist"] {
    transition: all 0.3s ease !important;
}

.analysis-icon[onclick*="chartist"].selected {
    border: 1px solid rgba(236,72,153,0.3) !important;
    box-shadow: 0 4px 20px rgba(236,72,153,0.15) !important;
    transform: scale(1.05) !important;
    background: rgba(236,72,153,0.1) !important;
}

/* Alchemist - Purple */
.analysis-icon[onclick*="alchemist"] {
    transition: all 0.3s ease !important;
}

.analysis-icon[onclick*="alchemist"].selected {
    border: 1px solid rgba(139,92,246,0.3) !important;
    box-shadow: 0 4px 20px rgba(139,92,246,0.15) !important;
    transform: scale(1.05) !important;
    background: rgba(139,92,246,0.1) !important;
}

/* Psychologist - Green */
.analysis-icon[onclick*="psychologist"] {
    transition: all 0.3s ease !important;
}

.analysis-icon[onclick*="psychologist"].selected {
    border: 1px solid rgba(34,197,94,0.3) !important;
    box-shadow: 0 4px 20px rgba(34,197,94,0.15) !important;
    transform: scale(1.05) !important;
    background: rgba(34,197,94,0.1) !important;
}

/* Hover effects */
.analysis-icon:hover {
    transform: translateY(-2px);
}

.analysis-icon:active {
    transform: scale(0.95) !important;
}

@keyframes analysispattern-shine {
    0% { transform: rotate(45deg) translateX(-100%); }
    100% { transform: rotate(45deg) translateX(100%); }
}

/* Slider styles */
.analysispattern-range {
    height: 6px;
    background: rgba(59,130,246,0.2);
    border-radius: 3px;
    appearance: none;
    outline: none;
    width: 100%;
}

.analysispattern-range::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 10px rgba(59,130,246,0.5);
}

/* Modal animation */
@keyframes analysispattern-modal-fade-in {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.analysispattern-modal-content {
    animation: analysispattern-modal-fade-in 0.3s ease-out;
}

/* Mobile responsiveness - Enhanced for iPhone SE */
@media (max-width: 375px) {
    .style-modal-content {
        padding: 0.75rem !important;
        width: 95% !important;
    }
    
    h2 {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .analysis-icon {
        width: 75px !important;
        height: 75px !important;
        padding: 0.5rem !important;
        border-radius: 12px !important;
    }
    
    .icon-svg {
        width: 18px !important;
        height: 18px !important;
        margin-bottom: 0.25rem !important;
    }
    
    .analysis-icon div {
        font-size: 11px !important;
    }
    
    /* More compact sliders */
    label {
        font-size: 0.75rem !important;
    }
    
    span {
        font-size: 0.75rem !important;
    }
    
    input[type="range"] {
        height: 4px !important;
        padding: 0 !important;
    }
    
    .buttons-container {
        gap: 0.5rem !important;
    }
    
    button {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
    }

    /* Don't clobber buttons that explicitly opt into being circular via
       inline border-radius: 50% (modal close, copy, share icons). The
       generic rule above would otherwise turn 36×36 circles into rounded
       squares (or, with browser-default min-widths, ovals) on <=375px. */
    button[style*="border-radius: 50%"],
    button[style*="border-radius:50%"] {
        border-radius: 50% !important;
        padding: 0 !important;
    }
}
    
    /* Base Icon Styles */
.icon-svg {
    width: clamp(1.5rem, 3vw, 2.5rem);
    height: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0 auto 0.75rem;
    color: currentColor;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 5px currentColor);
}

/* Analysis Icon Base */
.analysis-icon {
    position: relative;
    width: clamp(80px, 15vw, 120px);
    height: clamp(80px, 15vw, 120px);
    padding: clamp(0.5rem, 1vw, 1rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 0 10px rgba(0, 0, 0, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.05) !important;
    background: rgba(13, 13, 20, 0.6) !important;
    border-radius: 16px;
    backdrop-filter: blur(8px);
    overflow: hidden;
}

/* Intense Cyberpunk Effects for Selected States */

/* Detective - Blue */
.analysis-icon[onclick*="detective"].selected {
    border: 3px solid rgba(59,130,246,0.9) !important;
    box-shadow: 
        0 0 30px rgba(59,130,246,0.5),
        0 0 60px rgba(59,130,246,0.3),
        inset 0 0 20px rgba(59,130,246,0.3) !important;
    transform: scale(1.05) translateY(-5px) !important;
    background: radial-gradient(circle at center, 
        rgba(59,130,246,0.3),
        rgba(59,130,246,0.1)) !important;
}

/* Chartist - Pink */
.analysis-icon[onclick*="chartist"].selected {
    border: 3px solid rgba(236,72,153,0.9) !important;
    box-shadow: 
        0 0 30px rgba(236,72,153,0.5),
        0 0 60px rgba(236,72,153,0.3),
        inset 0 0 20px rgba(236,72,153,0.3) !important;
    transform: scale(1.05) translateY(-5px) !important;
    background: radial-gradient(circle at center, 
        rgba(236,72,153,0.3),
        rgba(236,72,153,0.1)) !important;
}

/* Alchemist - Purple */
.analysis-icon[onclick*="alchemist"].selected {
    border: 3px solid rgba(139,92,246,0.9) !important;
    box-shadow: 
        0 0 30px rgba(139,92,246,0.5),
        0 0 60px rgba(139,92,246,0.3),
        inset 0 0 20px rgba(139,92,246,0.3) !important;
    transform: scale(1.05) translateY(-5px) !important;
    background: radial-gradient(circle at center, 
        rgba(139,92,246,0.3),
        rgba(139,92,246,0.1)) !important;
}

/* Psychologist - Green */
.analysis-icon[onclick*="psychologist"].selected {
    border: 3px solid rgba(34,197,94,0.9) !important;
    box-shadow: 
        0 0 30px rgba(34,197,94,0.5),
        0 0 60px rgba(34,197,94,0.3),
        inset 0 0 20px rgba(34,197,94,0.3) !important;
    transform: scale(1.05) translateY(-5px) !important;
    background: radial-gradient(circle at center, 
        rgba(34,197,94,0.3),
        rgba(34,197,94,0.1)) !important;
}

/* Enhanced Hover Effects */
.analysis-icon:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.2),
        inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

.analysis-icon:hover .icon-svg {
    filter: drop-shadow(0 0 10px currentColor);
    transform: scale(1.1);
}

/* Selected Icon Enhancement */
.analysis-icon.selected .icon-svg {
    filter: drop-shadow(0 0 15px currentColor);
    transform: scale(1.15);
    animation: iconPulse 2s infinite;
}

/* Enhanced Cyberpunk Border Effect */
.analysis-icon.selected::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(
        135deg,
        transparent,
        currentColor,
        transparent
    );
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
    animation: borderRotate 3s linear infinite;
}

/* Enhanced Corner Accents */
.analysis-icon.selected::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: 
        linear-gradient(45deg, currentColor 50%, transparent 50%) top left/20px 20px no-repeat,
        linear-gradient(-45deg, currentColor 50%, transparent 50%) top right/20px 20px no-repeat,
        linear-gradient(-135deg, currentColor 50%, transparent 50%) bottom right/20px 20px no-repeat,
        linear-gradient(135deg, currentColor 50%, transparent 50%) bottom left/20px 20px no-repeat;
    opacity: 0.6;
    animation: cornerPulse 2s infinite;
}

/* Enhanced Animations */
@keyframes borderRotate {
    0% { 
        transform: rotate(0deg);
        opacity: 0.5;
    }
    50% { 
        transform: rotate(180deg);
        opacity: 1;
    }
    100% { 
        transform: rotate(360deg);
        opacity: 0.5;
    }
}

@keyframes cornerPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1.15);
        filter: drop-shadow(0 0 15px currentColor);
    }
    50% { 
        transform: scale(1.2);
        filter: drop-shadow(0 0 25px currentColor);
    }
}

/* Responsive Grid Layout */
.icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(80px, 15vw, 120px), 1fr));
    gap: clamp(0.5rem, 2vw, 1.5rem);
    justify-items: center;
    align-items: center;
    width: 100%;
    padding: clamp(0.5rem, 2vw, 1.5rem);
}

/* Mobile & Tablet Optimization */
@media (max-width: 768px) {
    .analysis-icon {
        padding: 0.75rem;
    }

    .analysis-icon.selected::after {
        background-size: 15px 15px;
    }
}

/* Large Screen Optimization */
@media (min-width: 1200px) {
    .icon-svg {
        width: 2.5rem;
        height: 2.5rem;
    }

    .analysis-icon {
        width: 120px;
        height: 120px;
    }
}

/* ===== block #3 ===== */
    
    .splashscreen-logo {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 0px;
    border: 4px solid var(--neon-gold);
    box-shadow: 0 0 15px var(--neon-gold),
                0 0 30px rgba(255, 215, 0, 0.5);
    animation: logoFloat 3s ease-in-out infinite;
    overflow: hidden;
    transform: translateY(-60px);
}

.logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transition: 
        opacity 0.3s ease-in-out,
        transform 0.2s ease-out;
    animation: cycleLogos 3s linear infinite;
}

@keyframes cycleLogos {
    0%, 16% {
        background-image: url('images/icon-512-maskable.png');
        transform: scale(1);
    }
    15.9%, 16% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    17%, 33% {
        background-image: url('images/detective2.png');
        transform: scale(1);
    }
    32.9%, 33% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    34%, 50% {
        background-image: url('images/chartist2.png');
        transform: scale(1);
    }
    49.9%, 50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    51%, 67% {
        background-image: url('images/alchemist2.png');
        transform: scale(1);
    }
    66.9%, 67% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    68%, 84% {
        background-image: url('images/psychologist2.png');
        transform: scale(1);
    }
    83.9%, 84% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    85%, 100% {
        background-image: url('images/holistic2.png');
        transform: scale(1);
    }
}

@keyframes logoFloat {
    0%, 100% { 
        transform: translateY(-60px) scale(1); 
        box-shadow: 0 0 15px var(--neon-gold),
                    0 0 30px rgba(255, 215, 0, 0.5);
    }
    50% { 
        transform: translateY(-70px) scale(1.05); 
        box-shadow: 0 0 25px var(--neon-gold),
                    0 0 40px rgba(255, 215, 0, 0.7);
    }
}

.splashscreen-logo::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--neon-gold) 90deg,
        transparent 180deg
    );
    animation: rotateConic 3s linear infinite;
    opacity: 0.5;
}
    
    

/* ===== block #4 ===== */
@keyframes rhythmicPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ===== block #5 ===== */
    
    
.cyber-chart-container {
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    padding: 0.0rem 0.0rem;
}

.cyber-chart {
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-grid {
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.chart-line {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.data-point {
    animation: pulsePoint 2s infinite;
}
    
    

.chart-label {
    fill: #EEEEEE;
    font-size: 18px;
    font-family: monospace;
    font-weight: 600;
    animation: fadeIn 0.5s ease-out forwards;
}

/* Add specific classes for different label types */
.chart-label-change {
    fill: currentColor; /* This will use the color passed from PHP */
    font-size: 16px;
    font-weight: 500;
}

.chart-label-main {
    font-size: 18px;
    font-weight: 600;
    fill: #bfbfbf; /* Add this bright white fill */

}

.date-label {
    fill: rgba(255, 255, 255, 0.5);
    font-size: 16px;
}

.chart-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 255, 255, 0.8),
        transparent
    );
}

/* Updated line drawing animation */
@keyframes drawLine {
    0% {
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
    }
    100% {
        stroke-dasharray: 2000;
        stroke-dashoffset: 0;
    }
}

@keyframes pulsePoint {
    0%, 100% { r: 4; }
    50% { r: 6; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scanLine {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

/* Mobile Responsive Adjustments */
/* Add these media queries for better mobile optimization */
/* Mobile Responsive Adjustments (if needed) */
@media (max-width: 640px) {
   .chart-label {
        font-size: 33px; /* Maximum size on large screens */
    }
    
    .date-label {
        font-size: 30px; /* Maximum date size on large screens */
    }
    .chart-label-change {
    font-size: 28px;
    }
    .chart-label-main {
        font-size: 28px; /* Maximum date size on large screens */
    }
  
}
    
    @media screen and (min-width: 1200px) {
    .chart-label {
        font-size: 18px; /* Maximum size on large screens */
    }
    
    .date-label {
        font-size: 16px; /* Maximum date size on large screens */
    }
}
    

/* ===== block #6 ===== */
.cyber-terminal-container {
 width: 100%; /* Match full width of the container */
    max-width: 100%; /* Ensure it doesn't exceed container width */
    padding: 0; /* Remove any existing padding if needed */
}

.cyber-terminal {
    background: rgba(16, 16, 24, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1),
                inset 0 0 20px rgba(0, 255, 255, 0.1);
    overflow: hidden;
    width: 100%; /* Ensure the inner terminal also spans full width */

}

.cyber-terminal-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.cyber-dots {
    display: flex;
    gap: 6px;
    margin-right: 16px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red { background: #ff5f56; }
.dot.amber { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.cyber-title {
    color: rgba(0, 255, 255, 0.8);
    font-family: monospace;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-content {
    padding: 16px;
    font-family: monospace;
    color: #00ff00;
    font-size: 12px;
    min-height: 120px;
    width: 100%; /* Make content full width */
    padding: 16px; /* Maintain existing padding */
}

.terminal-lines {
    margin-bottom: 8px;
}

.command-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prompt {
    color: #00ffff;
}

.cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: #00ff00;
    margin-left: 4px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Enhanced terminal effects */
.cyber-terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(0, 255, 255, 0.2),
        transparent
    );
    animation: scan 2s linear infinite;
}

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(120px); }
}
            

/* ===== block #7 ===== */
/* Stats Grid */
.stats-grid {
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* Stat Item Base */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Icon Container Base */
.stat-icon-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon Styles */
.stat-icon {
    width: 40px;
    height: 40px;
    stroke-width: 1.5px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Count Badge */
/* TO: Updated .stat-count style */
.stat-count {
    position: absolute;
    right: -15px;
    top: -15px;
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 400;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.stat-count:not(:empty) {
    opacity: 1;
    visibility: visible;
}

/* Label */
.stat-label {
    font-size: 17px;
    font-weight: 400;
    margin-top: -5px;
    opacity: 0.9;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* Mobile Optimization */
@media (max-width: 640px) {
    .stats-grid {
        gap: 20px;
        padding: 8px 0;
    }
    
    .stat-icon-container {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }
    
    .stat-icon {
        width: 24px;
        height: 24px;
        stroke-width: 1.5px;
    }
    
    .stat-label {
        font-size: 12px;
        font-weight: 500;
        margin-top: 6px;
        margin-bottom: 8px;
    }
    
    .stat-count {
        min-width: 20px;
        height: 20px;
        font-size: 12px;
        font-weight: 400;
        padding: 0 4px;
        right: -4px;
        top: -4px;
    }
}

/* Positive Stats */
.stat-positive .stat-icon-container {
    background: rgba(34, 197, 94, 0.1);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.stat-positive .stat-icon {
    color: rgb(34, 197, 94);
}

.stat-positive .stat-count {
    background: rgb(34, 197, 94);
}

.stat-positive .stat-label {
    color: rgb(34, 197, 94);
}

/* Neutral Stats */
.stat-neutral .stat-icon-container {
    background: rgba(245, 158, 11, 0.1);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.stat-neutral .stat-icon {
    color: rgb(245, 158, 11);
}

.stat-neutral .stat-count {
    background: rgb(245, 158, 11);
}

.stat-neutral .stat-label {
    color: rgb(245, 158, 11);
}

/* Negative Stats */
.stat-negative .stat-icon-container {
    background: rgba(239, 68, 68, 0.1);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.stat-negative .stat-icon {
    color: rgb(239, 68, 68);
}

.stat-negative .stat-count {
    background: rgb(239, 68, 68);
}

.stat-negative .stat-label {
    color: rgb(239, 68, 68);
}

/* Processing Stats */
.stat-processing .stat-icon-container {
    background: rgba(59, 130, 246, 0.1);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
}



.stat-processing .stat-count {
    background: rgb(59, 130, 246);
}

.stat-processing .stat-label {
    color: rgb(59, 130, 246);
}

/* Active State */
.stat-item .stat-icon-container {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item:hover .stat-icon-container {
    transform: translateY(-2px);
}

.stat-item:hover .stat-icon {
    transform: scale(1.1);
}

/* Processing Animation */
.stat-processing.active .stat-icon {
    animation: processing-spin 2s linear 3; 
    /* This will spin 3 times and then stop */
}

.stat-processing.active .stat-icon-container {
    animation: processing-pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.stat-processing.active .stat-icon.fast-spin {
    animation: processing-spin 0.5s linear; /* Fast spin */
}

/* New hover and active states to ensure continuous fast spinning */
.stat-processing.active .stat-icon:hover,
.stat-processing.active .stat-icon:active {
    animation: processing-spin 0.5s linear infinite; /* Even faster on interaction */
}

@keyframes processing-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes processing-pulse {
    0%, 100% {
        box-shadow: 
            0 0 0 0 rgba(59, 130, 246, 0.4),
            inset 0 0 0 1px rgba(59, 130, 246, 0.2);
    }
    50% {
        box-shadow: 
            0 0 0 8px rgba(59, 130, 246, 0),
            inset 0 0 0 1px rgba(59, 130, 246, 0.4);
    }
}
            
.animate-spin {
    animation: spin 1s linear infinite;
}

.fast-spin {
    animation: spin 0.5s linear;
}

.temp-spin {
    animation: spin 2s linear 3; /* 1 means play once only */
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(720deg); } /* 720deg = 2 full rotations */
}

/* Update the synchronized float to not conflict with spin */
@keyframes synchronizedFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Give processing icon specific styling */
.stat-processing .stat-icon {
color: rgb(59, 130, 246);
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Remove any existing animation classes when spinning */
.stat-processing .stat-icon.spinning {
    animation: processing-spin 2s linear infinite;

}

/* Mobile Optimization */
@media (max-width: 640px) {
    .stats-grid {
        gap: 20px;
        padding: 8px 0;
        width: 100%;
    }
    
    .stat-icon-container {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }
    
    .stat-icon {
        width: 24px;
        height: 24px;
        stroke-width: 1.5px;
    }
    
    .stat-label {
        font-size: 11px;
        font-weight: 500;
        margin-top: 6px;
    }
    
    .stat-count {
        min-width: 20px;
        height: 20px;
        font-size: 13px;
        font-weight: 400;
        padding: 0 4px;
        right: -10px;
        top: -10px;
    }
}
            
            /* Add these to your existing styles section */
@keyframes success-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes error-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.success-pulse {
    animation: success-pulse 1s ease-out;
}

.error-pulse {
    animation: error-pulse 1s ease-out;
}

.stat-item {
    transition: transform 0.2s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
}

.stat-item:active {
    transform: translateY(0px);
}

/* ===== block #8 ===== */
 .chips-container {
    display: flex;
    gap: 12px;
    padding: 4px;
    margin: 20px auto; /* Center with equal margins top and bottom */
    justify-content: center;
    width: 100%;
}

.chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(17, 24, 39, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.chip:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.chip.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: white;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}

.chip-icon {
    transition: transform 0.3s ease;
}

.chip:hover .chip-icon {
    transform: scale(1.1);
}

.view-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.view-content.active {
    display: grid;
    opacity: 1;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .chips-container {
        padding: 2px;
        margin-bottom: 16px;
    }
    
    .chip {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
    
    .chip-icon {
        width: 14px;
        height: 14px;
    }
}
            

/* ===== block #9 ===== */
/* Enhanced Stock Card Styles */
#recentStocksList .result-item {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.7), rgba(17, 24, 39, 0.4));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#recentStocksList .result-item:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 
        0 8px 12px -1px rgba(0, 0, 0, 0.2),
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Status Icon Animations */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .stats-header {
        padding: 1rem;
    }
    
    .stats-header h2 {
        font-size: 1.25rem;
    }
    
    .status-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ===== block #10 ===== */
/* Scoped Custom Scrollbar Styles */
#stockModal-content::-webkit-scrollbar {
    width: 8px;
}

#stockModalContent::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#stockModalContent::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 4px;
}

#stockModalContent::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.7);
}



/* Decision Badge Styles */
.stock-modal-decision-badge {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    /*text-transform: uppercase; */
    letter-spacing: 0.5px;
    
}

.stock-modal-decision-yes {
    background: rgba(34, 197, 94, 0.9);
    color: white;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.stock-modal-decision-no {
    background: rgba(239, 68, 68, 0.9);
    color: white;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.stock-modal-decision-neutral {
    background: rgba(245, 158, 11, 0.9);
    color: white;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

/* Animation for modal opening */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stock-modal-animation {
    animation: modalFadeIn 0.3s ease-out forwards;
}
    

    

/* ===== block #11 ===== */
                    

/* Stock Modal Loader */
.stock-modal-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Softer, more transparent background */
    background: rgba(17, 25, 40, 0.45);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    display: flex;
    justify-content: center;  
    align-items: center;
    z-index: 2001;
}
/* More translucent loader box */
.loader-box {
    width: 120px;
    height: 120px;
    /* Lighter glass effect */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.03)
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.25);
}
/* Slightly softer spinner */
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top: 3px solid rgb(59, 130, 246);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}
/* More muted loader text */
.loader-text {
    color: rgba(255, 255, 255, 0.7);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

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

/* ===== block #12 ===== */
 
/* Base Modal Structure */
#disclaimer2Modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 25, 40, 0.75);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

/* Modal Container */
.disclaimer2-container {
    background: linear-gradient(
        to bottom right, 
        rgba(30, 40, 60, 0.9) 0%, 
        rgba(20, 30, 50, 0.9) 100%
    );
    border-radius: 24px;
    width: 90%;
    max-width: 800px;
    padding: 40px;
    text-align: center;
    position: relative;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(74, 144, 226, 0.2);
    border: 2px solid rgba(74, 144, 226, 0.3);
    transform: scale(0.85);
    opacity: 0;
    transition: 
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    pointer-events: auto;
    cursor: default;
    z-index: 10001;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Show States */
#disclaimer2Modal.show {
    opacity: 1;
    visibility: visible;
}

#disclaimer2Modal.show .disclaimer2-container {
    transform: scale(1);
    opacity: 1;
}

#disclaimer2Modal.show * {
    pointer-events: auto;
}

/* Shine Effect */
.disclaimer2-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        transparent 100%
    );
    transform: rotate(45deg);
    animation: shine 5s infinite linear;
    z-index: 1;
}

/* Header Styles */
.disclaimer2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    position: relative;
}

/* Warning Icon */
.warning2-icon {
    width: 100px;
    height: 100px;
    background: 
        radial-gradient(
            circle at 30% 30%, 
            rgba(255, 193, 7, 0.3), 
            transparent 50%
        ),
        linear-gradient(
            135deg, 
            rgba(255, 193, 7, 0.1), 
            rgba(255, 193, 7, 0.3)
        );
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    animation: 
        pulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite,
        glow 3s infinite alternate;
    box-shadow: 
        0 0 20px rgba(255, 193, 7, 0.3),
        inset 0 0 15px rgba(255, 193, 7, 0.2);
}

.warning2-icon svg {
    width: 60px;
    height: 60px;
    color: #ffc107;
    filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.5));
}

/* Text Styles */
.disclaimer2-title {
    font-size: 28px;
    color: #f0f4f8;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.disclaimer2-text {
    color: #b0b8c0;
    line-height: 1.7;
    margin-bottom: 35px;
    font-size: 16px;
    font-weight: 400;
}

/* Button Styles */
.disclaimer2-button {
    width: 200px;
    height: 50px;
    padding: 12px 24px;
    background: rgb(59, 130, 246);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        0 4px 12px rgba(74, 144, 226, 0.2),
        0 2px 4px rgba(74, 144, 226, 0.1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.disclaimer2-button:hover {
    background: rgb(37, 99, 235);
    box-shadow: 
        0 6px 16px rgba(74, 144, 226, 0.25),
        0 3px 6px rgba(74, 144, 226, 0.15);
    transform: translateY(-1px);
}

.disclaimer2-button:active {
    transform: translateY(1px);
    box-shadow: 
        0 2px 8px rgba(74, 144, 226, 0.15),
        0 1px 2px rgba(74, 144, 226, 0.1);
}

.disclaimer2-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transition: all 0.5s;
}

.disclaimer2-button:hover::before {
    left: 100%;
}

/* Animations */
@keyframes shine {
    0% { transform: rotate(45deg) translateX(-100%); }
    100% { transform: rotate(45deg) translateX(100%); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glow {
    0% { 
        box-shadow: 
            0 0 20px rgba(255, 193, 7, 0.3),
            inset 0 0 15px rgba(255, 193, 7, 0.2);
    }
    100% { 
        box-shadow: 
            0 0 30px rgba(255, 193, 7, 0.5),
            inset 0 0 25px rgba(255, 193, 7, 0.3);
    }
}

/* Responsive Design */
@media (max-width: 600px) {
    .disclaimer2-container {
        width: 90%;
        padding: 25px;
        border-radius: 16px;
    }

    .warning2-icon {
        width: 68px;
        height: 68px;
    }

    .warning2-icon svg {
        width: 38px;
        height: 38px;
    }

    .disclaimer2-title {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .disclaimer2-text {
        font-size: 12px;
        margin-bottom: 25px;
    }

    .disclaimer2-button {
        padding: 12px;
        font-size: 18px;
    }
}
                                

/* ===== block #13 ===== */
  .cyber-footer-container {
    position: relative;
    overflow: hidden;
    padding: 0.0rem;
    padding-top: 12px;
    padding-bottom: 12px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.05), transparent);
  }

  .cyber-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    animation: neonPulse 2s infinite;
  }

  .cyber-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-family: monospace;
    color: #a0a0a0;
  }

  .version-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 4px;
  }

  .cyber-dot {
    width: 6px;
    height: 6px;
    background: #00ffff;
    border-radius: 50%;
    animation: cyberpulse 1.5s infinite;
  }

  .cyber-link {
    color: #00ffff;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
  }

  .cyber-link:hover {
    text-shadow: 0 0 8px #00ffff;
  }

  .cyber-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #00ffff;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .cyber-link:hover::before {
    transform: scaleX(1);
  }

  @keyframes neonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  @keyframes cyberpulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
                                
                                
#currentStatus, #skeletonCurrentStatus {
    color: #FFD700; /* Gold */
    font-size: 0.9rem; /* Increased from default */
    font-weight: 400; /* Added for better visibility */
}

#elapsedTime, #skeletonElapsedTime {
    color: #FFFFFF; /* White */
    font-size: 0.9rem; /* Increased from default */
    font-weight: 300; /* Added for better visibility */
}
                                
body.modal-open {
    background: rgba(0, 0, 0, 0.5) !important; /* More transparent (50% opacity) */
    backdrop-filter: blur(5px) !important; /* Reduced blur */
   overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
}
                                
                                

/* ===== block #14 ===== */
  /* PIN modal permanently force-hidden — gating disabled, see continueToWhatsApp().
     !important beats any inline style:display:block JS might set. */
  #whatsappVerificationModal { display: none !important; }

/* ===== block #15 ===== */
        @keyframes synchronizedFloat {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateY(-10px) rotate(-2deg); 
    }
    50% { 
        transform: translateY(0) rotate(0deg); 
    }
    75% { 
        transform: translateY(-5px) rotate(2deg); 
    }
}

#whatsappVerificationProfileImage {
    position: relative;  /* Ensure proper z-index stacking */
    z-index: 10;  /* High z-index for the entire container */
}

                       
                                
@keyframes analyzing-struggle {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    10% { 
        transform: translate(-3px, -2px) rotate(-3deg); 
    }
    20% { 
        transform: translate(3px, 2px) rotate(3deg); 
    }
    30% { 
        transform: translate(-4px, -3px) rotate(-4deg); 
    }
    40% { 
        transform: translate(4px, 3px) rotate(4deg); 
    }
    50% { 
        transform: translate(-2px, -1px) rotate(-2deg); 
    }
    60% { 
        transform: translate(2px, 1px) rotate(2deg); 
    }
}

#profileImage.analyzing-state {
    animation: 
        analyzing-struggle 0.2s infinite;
    background-color: #3B82F6;
    box-shadow: 
        0 0 15px rgba(59, 130, 246, 0.3),
        inset 0 0 10px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    filter: brightness(1.1);
}

#chatIcon.analyzing-state {
    animation: 
        analyzing-synchronizedFloat 3s ease-in-out infinite,
        analyzing-struggle 0.2s infinite;
    background-color: #3B82F6;
    box-shadow: 
        0 0 15px rgba(59, 130, 246, 0.3),
        inset 0 0 10px rgba(59, 130, 246, 0.2);
}
                                
.analyzing-state {
    animation: analyzing-struggle 0.2s infinite !important;
}
                                
        

/* ===== block #16 ===== */
                                
                                
       .numeric-keypad {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
}

.keypad-button {
      background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: bold;
    /* Add these new properties */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    min-height: 60px; /* Ensure buttons are large enough for touch */
    position: relative;
    overflow: hidden;
}

.keypad-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.keypad-button:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}        

/* Add ripple effect styles */
.keypad-button .ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ===== block #17 ===== */
#skeletonLoader .skeleton-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 0.75rem;
    position: relative;  
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
}

#skeletonLoader .skeleton-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
    z-index: 1;
}

/* ===== block #18 ===== */
                                
/* Bottom Sheet Styles */
.bottom-sheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    z-index: 10000;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
}

.bottom-sheet.show {
    bottom: 0;
    display: block;
}

.bottom-sheet::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bottom-sheet.show::before {
    opacity: 1;
}

.bottom-sheet-content {
    position: relative;
    background: rgba(28, 28, 28, 0.95);
    border-radius: 24px 24px 0 0;
    padding: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateZ(0);
}

.bottom-sheet-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.bottom-sheet-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.bottom-sheet-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.whatsapp-choice-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.whatsapp-choice-btn:active {
    transform: scale(0.98);
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    color: #25D366;
}

.btn-text {
    flex: 1;
    text-align: left;
}

.btn-title {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.btn-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-top: 2px;
}

.arrow-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.3);
}

.whatsapp-choice-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.whatsapp-choice-btn.business {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(37, 211, 102, 0.05));
}

.whatsapp-choice-btn.regular {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(37, 211, 102, 0.1));
}

.whatsapp-choice-btn.cancel {
    background: rgba(255, 255, 255, 0.05);
    color: #ef4444;
    font-weight: 600;
    font-size: 17px;
}

/* Cyberpunk Glow Effects */
.bottom-sheet-content::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, 
        rgba(37, 211, 102, 0.5),
        rgba(37, 211, 102, 0),
        rgba(37, 211, 102, 0.5)
    );
    border-radius: 24px 24px 0 0;
    z-index: -1;
    animation: borderGlow 4s linear infinite;
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .bottom-sheet-content {
        padding-bottom: 30px;
    }
}

/* =====================================================================
   Stock Analysis Modal — mobile layout fixes (2026-05-13)
   - Chart inside #stockModalContent dominated the scroll area on phones,
     squeezing the analysis text to ~4 lines. Capping the image height
     leaves room for several screenfuls of text without forcing a scroll
     just to see "what's the verdict body".
   - Native scrollbars are invisible on iOS Safari → user thinks the
     text is cut off rather than scrollable. A thin always-visible
     scrollbar advertises the scroll axis without taking real estate.
   ===================================================================== */
.stock-modal-card #stockmodalimage img {
    display: block;
    width: auto;
    max-width: 100%;
    /* vh is the fallback for very old browsers; dvh tracks the actual
       visible viewport on mobile so the chart stays sized to what the
       user can actually see (vh on iOS Safari includes the URL bar
       region, making the image larger than intended). */
    max-height: 32vh;
    max-height: 32dvh;
    object-fit: contain;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .stock-modal-card #stockmodalimage img {
        max-height: 26vh;
        max-height: 26dvh;
    }
}

.stock-modal-card #stockModalContent {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.stock-modal-card #stockModalContent::-webkit-scrollbar {
    width: 6px;
}
.stock-modal-card #stockModalContent::-webkit-scrollbar-track {
    background: transparent;
}
.stock-modal-card #stockModalContent::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 3px;
}
.stock-modal-card #stockModalContent::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

/* Subtle bottom fade as a secondary scroll-more hint. Sits behind the
   text via a mask gradient that only affects the last 18px of the
   scroll viewport, not the document end — so the fade naturally
   disappears once the user scrolls to the bottom. */
.stock-modal-card #stockModalContent {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
}

/* =====================================================================
   Live Section Stream — chrome-extension uploads each completed
   ===start-CODE-sectionN=== ... ===end-CODE-sectionN=== pair while
   Claude is still generating. Cards appear here one-by-one in
   ascending section-number order so the user can read the analysis
   section-by-section instead of waiting for the full result.
   ===================================================================== */
#liveSectionStream.live-stream {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
    padding: 0 4px;
    width: 100%;
}

.live-section-card {
    position: relative;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 14px 16px 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 8px 24px -16px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms ease, transform 320ms ease;
    overflow: hidden;
}

.live-section-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.live-section-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.live-section-card__index {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(59, 130, 246, 0.18));
    color: rgba(190, 242, 200, 0.95);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.live-section-card__title {
    color: rgba(226, 232, 240, 0.95);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.live-section-card__body {
    margin: 0;
    padding: 0;
    color: rgba(226, 232, 240, 0.88);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    background: transparent;
    border: none;
}

/* Newest card highlight — softer outline on the most recent arrival so the
   eye finds it quickly. :last-child works because sections render in
   ascending order. */
#liveSectionStream .live-section-card:last-child {
    border-color: rgba(34, 197, 94, 0.32);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18) inset,
                0 8px 24px -16px rgba(0, 0, 0, 0.6);
}

/* Mobile: trim padding + font slightly so 24 cards stack comfortably */
@media (max-width: 640px) {
    #liveSectionStream.live-stream {
        gap: 10px;
        margin-top: 12px;
    }
    .live-section-card {
        padding: 12px 12px 14px;
        border-radius: 10px;
    }
    .live-section-card__title {
        font-size: 12.5px;
    }
    .live-section-card__body {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* Reduced-motion users get an instant reveal — no fade animation */
@media (prefers-reduced-motion: reduce) {
    .live-section-card {
        transition: none;
        opacity: 1;
        transform: none;
    }
}