:root {
    --coco-brown: #2e1b19;
    --coco-accent: #8bc34a;
    --bg-dark: #0a0a0a;
    --sidebar-w: 240px;
}

body { display: flex; margin: 0; background: var(--bg-dark); color: white; height: 100vh; font-family: 'Segoe UI', sans-serif; overflow: hidden; }

/* Sidebar */
#sidebar { width: var(--sidebar-w); background: #151515; border-right: 1px solid #333; display: flex; flex-direction: column; padding: 20px; flex-shrink: 0;}
.sidebar-header { font-size: 1.2rem; font-weight: bold; margin-bottom: 30px; display: flex; gap: 10px; align-items: center; }
.nav-item { padding: 12px; cursor: pointer; border-radius: 8px; transition: 0.2s; margin-bottom: 5px; color: #ccc; }
.nav-item:hover { background: #252525; color: var(--coco-accent); }
.sidebar-footer { margin-top: auto; color: #555; font-size: 0.8rem; }

/* Main Area */
#main-content { flex: 1; display: flex; flex-direction: column; position: relative; }
header { background: #111; padding: 15px; border-bottom: 1px solid #333; display: flex; align-items: center; justify-content: space-between; }
#chat { flex: 1; overflow-y: auto; padding: 30px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 15px; }

/* Messages */
.msg { max-width: 80%; padding: 12px 18px; border-radius: 12px; line-height: 1.5; }
.user { align-self: flex-end; background: var(--coco-accent); color: #000; font-weight: 600; }
.ai { align-self: flex-start; background: #222; border: 1px solid #333; display: flex; gap: 12px; }
.ai-icon { width: 25px; height: 25px; border-radius: 50%; }

/* Images */
.gen-img { max-width: 100%; border-radius: 10px; opacity: 0; transform: scale(0.95); transition: opacity 1s, transform 1s; }
.gen-img.revealed { opacity: 1; transform: scale(1); }
.dl-btns { margin-top: 10px; }

/* Input Bar */
.input-area { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, #0a0a0a 80%, transparent); }
.input-bar { display: flex; gap: 10px; background: #1e1e1e; padding: 10px; border-radius: 30px; border: 1px solid #333; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
#userInput { flex: 1; background: transparent; border: none; color: white; outline: none; padding-left: 10px; font-size: 1rem; }
#sendBtn { background: var(--coco-accent); border: none; padding: 10px 25px; border-radius: 20px; cursor: pointer; font-weight: bold; }

/* Panels (Library/Settings) */
.panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0a0a0a; z-index: 2000; padding: 40px; overflow-y: auto; }
.panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 20px; margin-bottom: 20px; }
.close-btn { background: transparent; border: 1px solid #555; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.hidden { display: none !important; }

/* Library Grid */
#library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }
.lib-card img { width: 100%; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.lib-card img:hover { border-color: var(--coco-accent); }

/* Loader */
#loader { position: fixed; bottom: 90px; left: calc(var(--sidebar-w) + 20px); z-index: 50; pointer-events: none; }
#loader img { width: 50px; border-radius: 10px; }

/* file thing I dont know this on */
.input-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, #0a0a0a 90%, transparent);
    display: flex;
    flex-direction: column;
}

#filePreview {
    background: #1a1a1a;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--coco-accent);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed #444;
    max-width: fit-content;
}

#removeFile {
    cursor: pointer;
    color: #ff4444;
    margin-left: 15px;
    font-weight: bold;
}