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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e4e6ea;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Login */
.login-page { flex:1; display:flex; align-items:center; justify-content:center; padding:2rem; min-height:100vh; }
.login-card { width:100%; max-width:420px; padding:2rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:16px; backdrop-filter:blur(8px); }
.login-logo { display:block; height:48px; margin:0 auto 1rem auto; }
.login-input { width:100%; padding:0.75rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.2); background:rgba(0,0,0,0.2); color:#e4e6ea; margin:0.75rem 0; }
.login-btn { width:100%; padding:0.75rem 1rem; border-radius:10px; border:none; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; font-weight:600; cursor:pointer; }
.login-btn:disabled { opacity:0.6; cursor:not-allowed; }
.login-error { margin-top:0.5rem; color:#ff6b6b; font-size:0.9rem; }
.login-success { margin-top:0.5rem; color:#51cf66; font-size:0.9rem; }
.muted { opacity:0.8; font-size:0.95rem; }

/* Chat - improved layout and scrolling */
.chat-page { 
    flex:1; 
    display:flex; 
    flex-direction:column; 
    height:100vh; 
    max-height:100vh; 
    overflow:hidden; 
}

.chat-header { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    padding:0.75rem 1rem; 
    border-bottom:1px solid rgba(255,255,255,0.08); 
    flex-shrink:0;
    background:rgba(255,255,255,0.02);
}

.chat-header .logo { height:36px; }

.chat-body { 
    flex:1; 
    overflow-y:auto; 
    overflow-x:hidden;
    padding:1rem; 
    display:flex; 
    flex-direction:column; 
    gap:0.75rem; 
    min-height:0; /* Important for flexbox scrolling */
}

/* Custom scrollbar */
.chat-body::-webkit-scrollbar {
    width: 8px;
}

.chat-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.chat-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.chat-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.message-wrapper { display:flex; margin-bottom:0.5rem; }
.message-wrapper.user { justify-content:flex-end; }
.message { max-width:80%; padding:0.75rem 1rem; border-radius:14px; background:rgba(255,255,255,0.08); word-wrap:break-word; }
.message.user { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.message.assistant { background:rgba(255,255,255,0.08); color:#e4e6ea; }
.empty-state { opacity:0.9; text-align:center; margin:2rem 0; }

.chat-input { 
    display:flex; 
    gap:0.75rem; 
    padding:1rem; 
    border-top:1px solid rgba(255,255,255,0.08); 
    flex-shrink:0;
    background:rgba(255,255,255,0.02);
}

.chat-text { 
    flex:1; 
    padding:0.75rem 1rem; 
    border-radius:12px; 
    border:1px solid rgba(255,255,255,0.2); 
    background:rgba(0,0,0,0.2); 
    color:#e4e6ea; 
    outline:none;
}

.chat-text:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Improved send button */
.send-btn { 
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    border: none; 
    background: linear-gradient(135deg, #4f46e5, #7c3aed); 
    color: #fff; 
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    font-family: system-ui, -apple-system, sans-serif;
}

.send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.send-btn:active:not(:disabled) {
    transform: translateY(0);
}

.send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.send-text {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-block;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

/* Reset button styling - restored */
.reset-btn { 
    padding: 0.6rem 1rem; 
    border-radius: 10px; 
    border: none; 
    background: linear-gradient(135deg, #ef4444, #dc2626); 
    color: #fff; 
    cursor: pointer; 
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.reset-btn:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.reset-btn:active {
    transform: translateY(0);
}

/* Markdown in messages */
.message .chat-image-markdown {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    border-radius: 12px;
    margin: 0.5rem 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: block;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.message .chat-image-markdown:hover {
    transform: scale(1.02);
    cursor: pointer;
}

/* Table styles for markdown tables */
.message .chat-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.75rem 0;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.message .chat-table thead {
    background: rgba(102, 126, 234, 0.3);
}

.message .chat-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(102, 126, 234, 0.25);
}

.message .chat-table th:first-child {
    border-top-left-radius: 6px;
}

.message .chat-table th:last-child {
    border-right: none;
    border-top-right-radius: 6px;
}

.message .chat-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    color: #e4e6ea;
    background: rgba(0, 0, 0, 0.1);
}

.message .chat-table td:last-child {
    border-right: none;
}

.message .chat-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

.message .chat-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.08);
}

.message .chat-table tbody tr:last-child td {
    border-bottom: none;
}

.message .chat-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

.message .chat-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

/* Alternating row colors for better readability */
.message .chat-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

/* Mobile table responsiveness */
@media (max-width: 768px) {
    .message .chat-table {
        font-size: 0.8rem;
    }
    
    .message .chat-table th,
    .message .chat-table td {
        padding: 0.5rem 0.7rem;
    }
}

.message h1, .message h2, .message h3, .message h4, .message h5, .message h6 {
    margin: 0.8rem 0 0.4rem 0;
    font-weight: 600;
}

.message h1 { font-size: 1.4rem; color: #fff; }
.message h2 { font-size: 1.2rem; color: #f0f0f0; }
.message h3 { font-size: 1.1rem; color: #e4e6ea; }

.message strong {
    font-weight: 700;
    color: #fff;
}

.message em {
    font-style: italic;
    color: #f0f0f0;
}

.message code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    color: #7dd3fc;
}

.message pre {
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.5rem 0;
    border-left: 3px solid #667eea;
}

.message pre code {
    background: none;
    padding: 0;
    color: #e4e6ea;
}

.message a {
    color: #7dd3fc;
    text-decoration: underline;
}

.message a:hover {
    color: #38bdf8;
}

.message ul, .message ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.message li {
    margin: 0.2rem 0;
}

/* Mobile responsive */
@media (max-width: 768px){
    .message { max-width:90%; }
    .chat-input { padding:0.75rem; gap:0.5rem; }
    .chat-text { padding:0.6rem 0.8rem; font-size:16px; /* Prevents zoom on iOS */ }
    .send-btn { width:44px; height:44px; }
    .message .chat-image-markdown { max-height: 200px; }
    .login-page { padding:1rem; }
}