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

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --bg-tertiary: #ececec;
    --text-primary: #000000;
    --text-secondary: #6e6e80;
    --accent: #10a37f;
    --accent-hover: #0d8c6f;
    --user-message: #f4f4f4;
    --ai-message: #ffffff;
    --border-color: #e5e5e5;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f0f0f;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.loading-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-logo {
    width: 120px;
    height: 120px;
    animation: pulse 2s ease-in-out infinite;
}

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

.loading-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loading-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.loading-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #a0a0a0;
    margin: 0 0 16px 0;
}

.loading-bar-container {
    width: 300px;
    height: 4px;
    background-color: #2a2a2a;
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar {
    height: 100%;
    background: linear-gradient(90deg, #10a37f 0%, #00d4aa 100%);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.hidden {
    display: none !important;
}

.chat-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-primary);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.imagen-randomxd {
    width: 28px;
    height: 28px;
    background-image: url(data:image/png;base64,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);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.messages-container::-webkit-scrollbar {
    width: 8px;
}

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

.messages-container::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    gap: 20px;
}

.chatgpt-logo {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.welcome-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
}

.message-bubble {
    display: flex;
    gap: 16px;
    width: 100%;
    animation: messageSlideIn 0.3s ease-out;
}

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

.message-bubble.user {
    flex-direction: row-reverse;
}

.message-bubble.ai {
    flex-direction: row;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
}

.message-avatar.user {
    background-color: var(--accent);
    color: white;
}

.message-avatar.ai {
    background-color: var(--accent);
    padding: 6px;
}

.message-avatar.ai svg {
    width: 100%;
    height: 100%;
    color: white;
}

.message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: calc(100% - 48px);
}

.message-text {
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.6;
    font-size: 16px;
    word-wrap: break-word;
}

.message-bubble.user .message-text {
    background-color: var(--user-message);
    color: var(--text-primary);
}

.message-bubble.ai .message-text {
    background-color: var(--ai-message);
    color: var(--text-primary);
}

.message-text.typing {
    padding: 16px;
}

.message-time {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 4px;
}

.message-text strong {
    font-weight: 700;
    color: var(--text-primary);
}

.message-text em {
    font-style: italic;
}

.message-text code {
    background-color: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    color: #eb5757;
}

.message-text pre {
    background-color: #000000;
    color: #ffffff;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.message-text pre code {
    background-color: transparent;
    padding: 0;
    color: #ffffff;
}

.message-text h1, .message-text h2, .message-text h3 {
    margin: 16px 0 8px 0;
    font-weight: 700;
}

.message-text h1 {
    font-size: 26px;
}

.message-text h2 {
    font-size: 22px;
}

.message-text h3 {
    font-size: 20px;
}

.message-text ul, .message-text ol {
    margin: 8px 0;
    padding-left: 24px;
}

.message-text li {
    margin: 4px 0;
}

.message-text a {
    color: var(--accent);
    text-decoration: none;
}

.message-text a:hover {
    text-decoration: underline;
}

.message-text p {
    margin: 8px 0;
}

.pixel-emoji {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}

.typing-indicator {
    display: flex;
    gap: 6px;
    padding: 4px 0;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.input-container {
    padding: 16px 24px 24px 24px;
    background-color: var(--bg-primary);
}

.message-form {
    display: flex;
    gap: 12px;
    align-items: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 4px 4px 4px 16px;
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
}

.message-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
}

.message-input {
    flex: 1;
    padding: 10px 0;
    background-color: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    font-family: 'Satoshi', sans-serif;
    outline: none;
}

.message-input::placeholder {
    color: var(--text-secondary);
}

.send-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--text-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-button:hover:not(:disabled) {
    background-color: #2f2f2f;
    transform: scale(1.05);
}

.send-button:active:not(:disabled) {
    transform: scale(0.95);
}

.send-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: var(--text-secondary);
}

@media (max-width: 768px) {
    .loading-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .loading-logo {
        width: 80px;
        height: 80px;
    }
    
    .loading-title {
        font-size: 32px;
    }
    
    .loading-bar-container {
        width: 250px;
    }
    
    .chat-header {
        padding: 12px 16px;
    }
    
    .messages-container {
        padding: 16px;
    }
    
    .input-container {
        padding: 12px 16px 16px 16px;
    }
    
    .welcome-title {
        font-size: 26px;
    }
    
    .message-text {
        font-size: 15px;
    }
}