@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');

:root {
    --accent: #10b981;
    --bg: #0f172a;
    --panel: #1e293b;
    --text: #f1f5f9;
    --border: #334155;
}

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

body { 
    font-family: 'Outfit', sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    overflow: hidden; 
}

.header-strip { 
    height: 75px; 
    background: var(--panel); 
    border-bottom: 2px solid var(--accent); 
    padding: 0 30px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-shrink: 0; 
}

.brand-box { display: flex; align-items: center; gap: 15px; }
.brand-img { height: 45px; width: auto; object-fit: contain; }

.shell-container { display: flex; flex: 1; overflow: hidden; }

.side-nav { 
    width: 280px; 
    background: #111827; 
    border-right: 1px solid var(--border); 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
}

.nav-link { 
    text-decoration: none; 
    color: #94a3b8; 
    padding: 12px; 
    display: block; 
    border-radius: 8px; 
    margin-bottom: 5px; 
    transition: 0.3s; 
}

.nav-link:hover { background: var(--panel); color: var(--accent); }

.view-port { flex: 1; padding: 30px; overflow-y: auto; background: #0b0f1a; }

.content-card, .node-card { 
    background: var(--panel); 
    border: 1px solid var(--border); 
    padding: 25px; 
    border-radius: 16px; 
    margin-bottom: 20px; 
}

/* Stylizacja przycisków */
button, .action-btn { 
    background: var(--accent); 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600; 
    text-decoration: none; 
    display: inline-block; 
    text-align: center; 
    transition: 0.3s;
}

button:hover, .action-btn:hover { filter: brightness(1.1); }

/* Wymuszenie okrągłego awatara */
.bot-face { 
    width: 100px !important; 
    height: 100px !important; 
    border-radius: 50% !important; 
    object-fit: cover; 
    border: 3px solid var(--accent); 
    display: block;
    margin: 0 auto 15px;
    background: var(--panel);
}

.talking { animation: wave 0.6s infinite alternate; }
@keyframes wave { from { transform: scale(1); } to { transform: scale(1.05); } }

input, textarea { 
    width: 100%; 
    padding: 12px; 
    background: var(--bg); 
    border: 1px solid var(--border); 
    color: white; 
    border-radius: 10px; 
    margin-bottom: 10px; 
}