styles.css

@import "tailwindcss";

/* Custom Animations & Transitions */

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* History Panel Slide Animation */
.slide-up-enter {
    transform: translateY(100%);
}
.slide-up-enter-active {
    transform: translateY(0);
    transition: transform 300ms ease-out;
}
.slide-up-exit {
    transform: translateY(0);
}
.slide-up-exit-active {
    transform: translateY(100%);
    transition: transform 300ms ease-in;
}

/* Loader */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #3b82f6;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

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

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Markdown-like styling for commit messages */
.commit-msg {
    font-family: 'Fira Code', monospace;
}

/* Smooth textarea expansion */
#prompt-input {
    transition: height 0.1s ease;
    -webkit-user-select: text;
    user-select: text;
}

/* Active Mic Animation */
.mic-active {
    color: #ef4444 !important;
    animation: pulse 1.5s infinite;
}

/* Radio Button Selection Styling */
input[type="radio"]:checked + div + .selected-indicator {
    opacity: 1;
}

input[type="radio"]:checked + div .text-gray-200 {
    color: #60a5fa; /* blue-400 */
}

input[type="radio"]:checked ~ div {
    color: #60a5fa;
}

/* Modal Animation */
@keyframes floatIn {
    0% { opacity: 0; transform: scale(0.95) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-float-in {
    animation: floatIn 0.2s ease-out forwards;
}

/* Disabled styling overlay */
input:disabled ~ div {
    opacity: 0.5;
}

@keyframes 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); }
}

/* Thinking Bar Scroll Animation - code flows right to left */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-scroll-left {
    animation: scrollLeft 15s linear infinite;
}

#thinking-text {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    padding-right: 50px;
}

/* Thinking bar expanded state */
#thinking-bar.expanded {
    max-height: 250px !important;
}

#thinking-bar.expanded #thinking-expand i {
    transform: rotate(180deg);
}

/* Thinking log entry animations */
.thinking-entry {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Status colors */
.status-thinking { color: #60a5fa; }
.status-generating { color: #a78bfa; }
.status-parsing { color: #34d399; }
.status-error { color: #f87171; }
.status-complete { color: #4ade80; }
.status-iteration { color: #c4b5fd; font-weight: 600; }
.status-tool { color: #a78bfa; }
.status-warning { color: #fbbf24; }

/* Agent Mode Styles */
#btn-agent-mode.agent-active {
    background: rgba(147, 51, 234, 0.3);
    border-color: rgba(147, 51, 234, 0.5);
    color: #c4b5fd;
}

#btn-agent-mode.agent-active i {
    animation: robotPulse 2s ease-in-out infinite;
}

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

/* Agent iteration indicator */
.agent-iteration {
    color: #c4b5fd;
    font-weight: 600;
}

/* Tool call styling in thinking log */
.tool-call {
    color: #a78bfa;
    font-family: 'Fira Code', monospace;
}

.tool-result {
    color: #34d399;
    font-size: 10px;
    margin-left: 12px;
    opacity: 0.8;
}

/* Ensure buttons are touch-friendly on mobile */
button, [type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Send button specific - ensure it's always clickable */
#btn-send {
    position: relative;
    z-index: 10;
}

/* Mobile-Specific Tweaks */
@media (max-width: 640px) {
    #bottom-bar-container {
        padding: 0.5rem;
        padding-bottom: env(safe-area-inset-bottom, 12px);
    }

    /* Hide agent label on very small screens */
    #agent-mode-label {
        display: none;
    }

    #btn-agent-mode {
        width: 32px;
        padding: 0;
        justify-content: center;
    }

    /* Compact input bar on mobile */
    #input-bar {
        padding: 0.375rem;
    }

    /* Smaller textarea padding on mobile */
    #prompt-input {
        font-size: 14px;
    }

    /* Project menu adjustments */
    #project-menu {
        width: calc(100vw - 2rem);
        max-width: 280px;
    }

    /* Model dropdown adjustments */
    #model-dropdown {
        width: calc(100vw - 2rem);
        max-width: 320px;
        right: 0.5rem !important;
        left: auto !important;
    }

    /* History panel full width on mobile */
    #history-panel {
        margin-left: 0;
        margin-right: 0;
    }

    /* Thinking bar compact */
    #thinking-container {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* Extra small screens (< 380px) */
@media (max-width: 380px) {
    /* Even more compact on tiny screens */
    #current-project-name {
        max-width: 70px !important;
    }

    #model-display {
        max-width: 40px !important;
    }

    #btn-model-selector {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }
}