/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Raleway:wght@400;800&display=swap');

header {
    padding: 1rem;
    position: relative;
    max-height: 100px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header-container h1 {
    color:#222222; 
}

.header-container img {
    width: auto;
    max-height: 100px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    object-fit: contain;
    transition: transform 0.3s ease;
}

body { 
    font-family: 'Raleway', sans-serif !important; 
    font-weight: 400; /* Regular weight */
    background:#f4f4f4; 
    margin:0; 
    padding:20px; 
    max-width:1200px; 
    margin:auto; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800; /* ExtraBold */
    color:#222222;
    margin: 0;
}

p, .conversation-item, .message, input[type="text"], textarea, button, #attachments, .file-pill, .suggestion {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}

/* Layout: chat + sidebar */
#container { 
    display:flex; 
    gap:20px; 
    max-height: 80vh;
}

/* Sidebar */
#sidebar {
    width: 280px;
    background: white;
    border-radius: 10px;
    height: 80vh;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

#sidebar h2 { 
    font-size:16px; 
    margin-bottom:10px; 
}

.conversation-item {
    padding:8px 10px;
    margin-bottom:6px;
    border-radius:6px;
    cursor:pointer;
    background:#f9f9f9;
    transition:background 0.2s;
    font-size:14px;
}
.conversation-item:hover { 
    background:#e0e0e0; 
}

/* Chat + Input container */
#chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#chat-box { 
    display: flex; 
    background: white;
    padding: 20px; 
    border-radius: 10px; 
    height: 80vh; 
    overflow-y: auto; 
    flex-direction: column;
}

.message { 
    display:block; 
    max-width:80%; 
    padding:10px 14px; 
    border-radius:12px; 
    margin:6px 0; 
    line-height:1.4; 
    width:fit-content; 
}

.user { 
    background-color:#BEBEBE; 
    color:#222222; 
    align-self:flex-end; 
    text-align:left; 
}

.datawizard { 
    background-color:#fdb670; 
    color:#222222; 
    align-self:flex-start; 
    text-align:left; 
}

#input-area { 
    margin-top: 10px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto;
    align-items: start;
    width: 100%;
}

#composer-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

input[type="text"], textarea { 
    flex:1; 
    border-radius:5px; 
    border:1px solid #ccc; 
    padding:10px; 
    font-size:16px; 
}

button { 
    border-radius:5px; 
    border:none; 
    background:#FF261F; 
    color:white; 
    cursor:pointer; 
    padding:10px 14px; 
    font-size:16px; 
}

button:hover { 
    background:#FF8A17; 
}

pre {
    background: #f0f0f0;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: monospace;
    position:relative;
}

code {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace;
}

.copy-btn { position:absolute; top:6px; right:6px; padding:4px 8px; font-size:12px; cursor:pointer; border:none; border-radius:4px; background:#FF261F; color:#fff; }

#attachments { font-size:14px; color:#333; }
.file-pill { display:inline-flex; align-items:center; gap:6px; background:#eef6ff; border:1px solid #cfe3ff; padding:4px 8px; border-radius:999px; margin:6px 6px 0 0; }
.file-pill button { background:transparent; color:#222222; border:none; padding:0; font-size:12px; }

/* Suggestions (floating) */
#suggestions { position:fixed; right:20px; bottom:80px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.suggestion { background:#FF261F; color:white; border:none; border-radius:25px; cursor:pointer; font-size:14px; padding:10px 14px; box-shadow:0 4px 8px rgba(0,0,0,0.2); transition:background 0.2s ease, transform 0.02s ease-in; text-align:left; }
.suggestion:hover { background:#FF8A17; }
.suggestion:active { transform:scale(0.99); }