:root { --border:#e5e7eb; --muted:#6b7280; --bg:#f9fafb; --primary:#2563eb; --primary-600:#1d4ed8; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.gradient-bg { background: radial-gradient(1200px 600px at 10% -10%, #dbeafe, transparent), radial-gradient(1200px 600px at 110% 10%, #fce7f3, transparent), var(--bg); }
.container { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }
.layout { display:flex; gap: 1rem; align-items: start; }
.layout .chat-container { flex: 1; display: flex; justify-content: center; }
.layout .chat-container > .card { max-width: 800px; width: 100%; }
.side-card { position: sticky; top: 80px; }
.side-card .profile { flex-direction: column; align-items: center; text-align: center; }
.side-card .avatar { width: 96px; height: 96px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.elevate { box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); }
h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.muted { color: var(--muted); margin: 0 0 1rem; }
.small { font-size: .875rem; }
.button { display: inline-block; border: 1px solid var(--border); border-radius: 8px; padding: .6rem 1rem; text-decoration: none; color: #111827; background: #fff; cursor: pointer; }
.button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.button.primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.profile { display: flex; gap: 1rem; align-items: center; }
.avatar { border-radius: 50%; }
.actions { margin-top: 1rem; }
button.button { font: inherit; }

/* Header */
.navbar { display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; border-bottom:1px solid var(--border); background: rgba(255,255,255,.7); backdrop-filter: blur(10px); position: sticky; top:0; z-index: 100; }
.brand { font-weight: 700; letter-spacing:.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-actions { display: flex; align-items: center; }
.nav-actions .profile { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.nav-actions .button { margin-left: .25rem; }

/* Auth */
.center { display:flex; justify-content:center; align-items: center; min-height: calc(100vh - 100px); padding: 0.5rem 0; }
.logo-circle { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:#eef2ff; color:#3730a3; font-size:28px; margin:0 auto .75rem; }
.auth-card { text-align:center; padding:1.75rem 2rem; max-width: 500px; width: 100%; }
.welcome-section { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); }

.welcome-header { margin-bottom: 1rem; }
.logo-icon { margin: 0 auto 0.75rem; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); border-radius: 16px; padding: 0.65rem; box-shadow: 0 6px 12px rgba(37, 99, 235, 0.12); }
.welcome-title { font-size: 1.65rem; font-weight: 700; background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 0.35rem 0; }
.welcome-subtitle { font-size: 0.95rem; color: var(--muted); font-weight: 500; margin: 0 0 1rem 0; }

.product-info { text-align: left; margin-bottom: 1rem; padding: 1rem; background: rgba(37, 99, 235, 0.03); border-radius: 12px; border: 1px solid rgba(37, 99, 235, 0.1); }
.product-description { color: #4b5563; line-height: 1.5; font-size: 0.85rem; margin: 0 0 0.875rem 0; }

.features-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0; }
.feature-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; background: white; border-radius: 8px; border: 1px solid rgba(37, 99, 235, 0.1); transition: transform 0.2s, box-shadow 0.2s; }
.feature-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); }
.feature-icon { font-size: 1.1rem; flex-shrink: 0; }
.feature-item span:last-child { font-size: 0.8rem; color: #374151; font-weight: 500; }

.signin-section { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid rgba(37, 99, 235, 0.1); }
.signin-text { color: var(--muted); font-size: 0.875rem; margin: 0 0 0.875rem 0; font-weight: 500; }

.google-signin-btn { display:inline-flex; align-items:center; justify-content: center; gap:12px; border:1px solid #dadce0; background:#fff; color:#3c4043; border-radius:8px; padding:14px 28px; text-decoration:none; font-size:15px; font-weight:600; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; box-shadow:0 2px 4px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.08); transition:all 0.2s; width: 100%; max-width: 320px; margin: 0 auto; }
.google-signin-btn:hover { box-shadow:0 4px 12px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.1); transform: translateY(-1px); background: #f8f9fa; }
.google-signin-btn svg { flex-shrink:0; }
.link { color: var(--primary-600); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* Chat */
.chat { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; height:calc(100vh - 200px); max-height:700px; }
.messages { padding:1rem; overflow:auto; flex:1; display:flex; flex-direction:column; gap:.75rem; }
.msg { max-width:80%; padding:.6rem .8rem; border-radius:12px; white-space:pre-wrap; line-height:1.45; box-shadow: 0 1px 0 rgba(0,0,0,.04); word-wrap: break-word; }
.me { align-self:flex-end; background:#e5f0ff; }
.bot { align-self:flex-start; background:#f4f4f5; }
.input { display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--border); }
.input input { flex:1; padding:.6rem .8rem; border:1px solid var(--border); border-radius:999px; font-size: 16px; }
.input input:disabled { background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }
.input button { min-width: 70px; touch-action: manipulation; }
.input button:disabled { opacity:0.6; cursor:not-allowed; }

/* Typing Indicator */
.typing-indicator { align-self:flex-start; background:#f4f4f5; padding:.75rem 1rem; border-radius:12px; display:none; align-items:center; gap:0.5rem; max-width:80px; }
.typing-indicator.show { display:flex; }
.typing-indicator .dot { width:8px; height:8px; border-radius:50%; background:#6b7280; animation:typing 1.4s infinite ease-in-out; }
.typing-indicator .dot:nth-child(1) { animation-delay:0s; }
.typing-indicator .dot:nth-child(2) { animation-delay:0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay:0.4s; }
@keyframes typing { 0%, 60%, 100% { transform:translateY(0); opacity:0.7; } 30% { transform:translateY(-10px); opacity:1; } }

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Container and Layout */
    .container { margin: 1rem auto; padding: 0 0.75rem; }
    
    /* Navbar */
    .navbar { padding: 0.6rem 0.75rem; flex-wrap: nowrap; min-height: 56px; }
    .brand { font-size: 0.85rem; max-width: 50%; }
    .nav-actions { flex: 1; justify-content: flex-end; margin-left: 0.5rem; }
    .nav-actions .profile { gap: 0.5rem; flex-wrap: nowrap; margin-right: 0 !important; }
    .nav-actions .profile .name { display: none; }
    .nav-actions .profile img { width: 36px !important; height: 36px !important; flex-shrink: 0; }
    .nav-actions .admin-link { 
        font-size: 0.75rem; 
        padding: 0.4rem 0.6rem; 
        background: rgba(37, 99, 235, 0.1);
        border-radius: 6px;
        white-space: nowrap;
    }
    .nav-actions .button { 
        font-size: 0.75rem; 
        padding: 0.5rem 0.9rem; 
        min-width: auto;
        white-space: nowrap;
    }
    
    /* Layout - Stack vertically on mobile */
    .layout { flex-direction: column; gap: 1rem; }
    
    /* Hide profile card on mobile */
    .mobile-hide { display: none !important; }
    
    /* Chat Container */
    .layout .chat-container { width: 100%; }
    .layout .chat-container > .card { max-width: 100%; padding: 1rem; }
    .chat { height: calc(100vh - 280px); max-height: none; }
    .messages { padding: 0.75rem; gap: 0.5rem; }
    .msg { max-width: 85%; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
    .input { padding: 0.5rem; gap: 0.5rem; }
    .input input { padding: 0.75rem 1rem; font-size: 16px; }
    .input button { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
    
    /* Cards */
    .card { padding: 1rem; border-radius: 8px; }
    h1 { font-size: 1.25rem; }
    
    /* Auth Card */
    .center { min-height: calc(100vh - 90px) !important; padding: 0.25rem 0 !important; }
    .auth-card { padding: 1.25rem 1.125rem !important; max-width: 100%; }
    .welcome-header { margin-bottom: 0.75rem !important; }
    .welcome-title { font-size: 1.4rem !important; margin-bottom: 0.25rem !important; }
    .welcome-subtitle { font-size: 0.9rem !important; margin-bottom: 0.75rem !important; }
    .logo-icon { width: 52px !important; height: 52px !important; margin-bottom: 0.6rem !important; padding: 0.55rem !important; }
    .product-info { padding: 0.875rem !important; margin-bottom: 0.875rem !important; }
    .product-description { font-size: 0.8rem !important; line-height: 1.45 !important; margin-bottom: 0.65rem !important; }
    .features-list { grid-template-columns: 1fr; gap: 0.5rem !important; margin-top: 0 !important; }
    .feature-item { padding: 0.45rem 0.55rem !important; }
    .feature-icon { font-size: 1rem !important; }
    .feature-item span:last-child { font-size: 0.75rem !important; }
    .signin-section { margin-top: 0.875rem !important; padding-top: 0.875rem !important; }
    .signin-text { font-size: 0.8rem !important; margin-bottom: 0.65rem !important; }
    .google-signin-btn { width: 100%; max-width: 100%; padding: 11px 16px; font-size: 13px; }
    
    /* Footer - Hide on mobile when user has access, show only when no access */
    .desktop-footer { display: none !important; }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .container { margin: 0.5rem auto; padding: 0 0.5rem; }
    .navbar { padding: 0.5rem 0.6rem; min-height: 52px; }
    .brand { font-size: 0.8rem; max-width: 45%; }
    .nav-actions { margin-left: 0.25rem; }
    .nav-actions .profile { gap: 0.4rem; }
    .nav-actions .profile img { width: 32px !important; height: 32px !important; }
    .nav-actions .admin-link { 
        font-size: 0.7rem; 
        padding: 0.35rem 0.5rem;
        margin-right: 0.25rem !important;
    }
    .nav-actions .button { 
        font-size: 0.7rem; 
        padding: 0.45rem 0.75rem;
    }
    .card { padding: 0.75rem; }
    h1 { font-size: 1.1rem; }
    .center { min-height: calc(100vh - 70px) !important; padding: 0.15rem 0 !important; }
    .auth-card { padding: 1rem 0.875rem !important; }
    .welcome-header { margin-bottom: 0.6rem !important; }
    .welcome-title { font-size: 1.25rem !important; margin-bottom: 0.2rem !important; }
    .welcome-subtitle { font-size: 0.85rem !important; margin-bottom: 0.6rem !important; }
    .logo-icon { width: 48px !important; height: 48px !important; margin-bottom: 0.5rem !important; padding: 0.45rem !important; }
    .product-info { padding: 0.75rem !important; margin-bottom: 0.75rem !important; }
    .product-description { font-size: 0.75rem !important; line-height: 1.4 !important; margin-bottom: 0.55rem !important; }
    .features-list { gap: 0.45rem !important; }
    .feature-item { padding: 0.4rem 0.5rem !important; }
    .feature-icon { font-size: 0.95rem !important; }
    .feature-item span:last-child { font-size: 0.7rem !important; }
    .signin-section { margin-top: 0.75rem !important; padding-top: 0.75rem !important; }
    .signin-text { font-size: 0.75rem !important; margin-bottom: 0.55rem !important; }
    .google-signin-btn { padding: 10px 14px !important; font-size: 12px !important; }
    .chat { height: calc(100vh - 250px); }
    .msg { max-width: 90%; font-size: 0.875rem; }
    .input { padding: 0.5rem; }
    .input button { min-width: 60px; padding: 0.6rem 1rem; font-size: 0.85rem; }
    footer { padding: 1rem 0.5rem; font-size: 0.875rem; }
}

/* Ensure input fields don't zoom on iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}