:root { --bg: #0a0a0a; --card-bg: #141414; --border: #D4AF37; --text: #fff; --text-soft: #aaa; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: 'Inter', sans-serif; background: #0f1117; color: var(--text); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }

.app-bar { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.app-bar-inner { max-width: 800px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.app-bar-brand { display: flex; align-items: center; gap: 12px; }
.app-bar-brand img { height: 34px; }
.brand-name { font-size: 15px; font-weight: 600; }
.brand-sub { font-size: 10px; color: var(--border); text-transform: uppercase; letter-spacing: 0.1em; }
.app-nav { display: flex; gap: 12px; }
.btn-logout { background:transparent; border:1px solid var(--border); padding: 8px 14px; border-radius: 6px; cursor:pointer; font-family:inherit; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; font-size: 13px; }

.chat-container { 
    flex: 1; max-width: 800px; width: 100%; margin: 0 auto; 
    display: flex; flex-direction: column; padding: 24px; 
}
.chat-header { text-align: center; margin-bottom: 24px; }
.chat-header h1 { font-family: 'Playfair Display', serif; color: var(--border); margin: 0 0 8px; font-size: 32px; }
.chat-header p { margin: 0; color: var(--text-soft); }

.chat-body { 
    flex: 1; background: var(--card-bg); border: 1px solid #333; border-radius: 12px; 
    padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; 
}
.chat-body::-webkit-scrollbar { width: 5px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.kodo-msg { max-width: 80%; padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.kodo-msg.bot { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(212, 175, 55, 0.3); align-self: flex-start; border-bottom-left-radius: 2px; }
.kodo-msg.user { background: var(--border); color: #000; align-self: flex-end; border-bottom-right-radius: 2px; font-weight: 500; }

.chat-input-area { 
    margin-top: 24px; display: flex; gap: 12px; 
}
.chat-input-area input { 
    flex: 1; padding: 14px 16px; background: var(--card-bg); 
    border: 1px solid #444; border-radius: 8px; color: var(--text); 
    font-family: inherit; font-size: 15px; 
}
.chat-input-area input:focus { outline: none; border-color: var(--border); }
.chat-input-area button { 
    padding: 0 24px; background: var(--border); color: #000; 
    border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 15px; 
}