style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    overflow-x: hidden;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100vw;
}

/* Header Styles */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo i {
    font-size: 2rem;
    color: #667eea;
}

.logo h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
}

.device-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.device-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4a5568;
}

.device-btn {
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.25rem;
    display: flex;
    gap: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.device-btn:hover {
    border-color: #cbd5e0;
}

.device-option {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4a5568;
}

.device-option.active {
    background: #667eea;
    color: white;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f7fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.status-indicator i {
    color: #f56565;
    font-size: 0.5rem;
    animation: pulse 2s infinite;
}

.status-indicator.ready i {
    color: #48bb78;
}

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

.credit {
    text-align: center;
    padding: 0.75rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    color: #4a5568;
}

.credit a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.credit a:hover {
    color: #5a67d8;
    text-decoration: underline;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.chat-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 800px;
    height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Messages Container */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.welcome-message {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    border: 2px dashed #cbd5e0;
}

.welcome-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.welcome-message h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.welcome-message p {
    color: #4a5568;
    line-height: 1.6;
}

/* Message Styles */
.message {
    display: flex;
    gap: 1rem;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.message.user .message-avatar {
    background: #667eea;
    color: white;
}

.message.assistant .message-avatar {
    background: #48bb78;
    color: white;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    margin-bottom: 0.5rem;
}

.message-role {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
}

.message-text {
    background: #f7fafc;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    line-height: 1.6;
    color: #2d3748;
    border: 1px solid #e2e8f0;
}

.message.user .message-text {
    background: #667eea;
    color: white;
    margin-left: 2rem;
}

.message.assistant .message-text {
    background: #f7fafc;
    margin-right: 2rem;
}

/* Input Container */
.input-container {
    border-top: 1px solid #e2e8f0;
    padding: 1.5rem;
    background: #fafafa;
}

.input-wrapper {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

#messageInput {
    flex: 1;
    padding: 1rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    resize: none;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    background: white;
    transition: border-color 0.2s ease;
    min-height: 48px;
    max-height: 120px;
}

#messageInput:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#messageInput:disabled {
    background: #f7fafc;
    color: #a0aec0;
    cursor: not-allowed;
}

.send-button {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: #667eea;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.send-button:hover:not(:disabled) {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.send-button:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #4a5568;
}

.model-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.char-count {
    font-weight: 500;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
}

.loading-spinner {
    margin-bottom: 2rem;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

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

.loading-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.loading-content p {
    color: #4a5568;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #48bb78);
    width: 0%;
    transition: width 0.3s ease;
}

/* Error Modal */
.error-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.error-content {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    margin: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.error-icon {
    font-size: 3rem;
    color: #f56565;
    margin-bottom: 1rem;
}

.error-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
}

.error-content p {
    color: #4a5568;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.retry-button {
    background: #667eea;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.retry-button:hover {
    background: #5a67d8;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #2d3748;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast.show {
    transform: translateX(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        padding: 0 1rem;
        flex-direction: column;
        text-align: center;
    }

    .logo h1 {
        font-size: 1.25rem;
    }

    .device-toggle {
        justify-content: center;
    }

    .main-content {
        padding: 1rem;
    }

    .chat-container {
        height: calc(100vh - 200px);
    }

    .messages-container {
        padding: 1rem;
    }

    .input-container {
        padding: 1rem;
    }

    .message.user .message-text {
        margin-left: 1rem;
    }

    .message.assistant .message-text {
        margin-right: 1rem;
    }

    .toast {
        left: 1rem;
        right: 1rem;
        transform: translateY(100px);
    }

    .toast.show {
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .header {
        padding: 0.75rem 0;
    }

    .device-toggle {
        flex-direction: column;
        gap: 0.75rem;
    }

    .device-btn {
        width: 100%;
        justify-content: center;
    }

    .logo {
        flex-direction: column;
        gap: 0.5rem;
    }

    .logo i {
        font-size: 1.5rem;
    }

    .logo h1 {
        font-size: 1.125rem;
    }

    .input-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* Scrollbar Styling */
.messages-container::-webkit-scrollbar {
    width: 6px;
}

.messages-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.messages-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
button:focus,
textarea:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .message-text {
        border-width: 2px;
    }
    
    .device-btn {
        border-width: 2px;
    }
}

The issue has been fixed! The main change was updating the device configuration from `'cpu'` to `'wasm'` to match the supported device options in transformers.js 3.7.3.

## What Changed:

1. **Device Configuration**: Changed default device from `'cpu'` to `'wasm'` (WebAssembly for CPU execution)
2. **UI Labels**: Updated the toggle buttons to show "WASM" instead of "CPU"
3. **Logic Updates**: Updated all device switching logic to use the correct device names

## Supported Device Options:
- **`wasm`** - WebAssembly CPU execution (default, works everywhere)
- **`webgpu`** - WebGPU GPU acceleration (requires modern browser with WebGPU support)

The application will now work correctly with the transformers.js library, with WASM as the default CPU backend and WebGPU as the optional GPU acceleration when supported by the browser.