body { margin: 0; font-family: 'Inter', Arial, sans-serif; background: #f6f8fa; color: #24324d; letter-spacing: 0.01em; }
/* Responsive container */
#container { width: 100%; max-width: 1200px; min-height: 900px; margin: 2rem auto; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 32px rgba(40,60,120,0.10); display: flex; flex-direction: column; position: relative; /* Added for positioning context */ }
#container header {    background: linear-gradient(90deg, #1b2445 0%, #03071c 100%); color: #fff; padding: 0.65rem 1rem; text-align: center; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.01em; border-bottom: 1px solid #e3e7ee; min-height: unset; position: relative; /* Added for icon positioning */}
#content { flex: 1 1 0; /* display: flex; */ /* Removed flex for absolute positioning */ min-height: 0; height: 100%; position: relative; overflow: hidden; /* Added for absolute positioning context */ }
#leftSide { /* flex: 2 1 0; */ /* Removed flex sizing */ width: 100%; /* Chat takes full width */ display: flex; flex-direction: column; min-height: 0; height: 100%; background: #fafdff; }

#controls { padding: 1rem; border-top: 1px solid #ccc; background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,0.04); display: flex; gap: 0.5rem; }
.free-row { display: flex; flex: 1; gap: 0.5rem; }
.free-row > input { flex:1; padding:.75rem 1.25rem; border:1px solid #b4bcd4; border-radius:2rem; font-size: 1rem; background: #f8fafd; }
.confirm-button { padding: .75rem 1.5rem; border: none; background: linear-gradient(90deg,#0066ff,#3399ff); color: #fff; border-radius: 2rem; cursor: pointer; font-weight: 600; font-size: 1rem; margin: 5px 0; }
.confirm-button:hover:not(:disabled) { background: linear-gradient(90deg,#3a8dde,#2956c5); box-shadow: 0 4px 16px rgba(40,60,120,0.10); }

/* Animation de scintillement */
@keyframes shine {
    0% { left: -50%; }
    100% { left: 150%; }
}

/* Animation de pulsation pour l'arrière-plan */
@keyframes pulse-bg {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Styles pour les boutons du header */
.header-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.header-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

#toggleCartButton {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.25);
}

#toggleCartButton:hover {
    transform: translateY(-52%);
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.3);
}

#toggleCartButton .cart-btn-icon { font-size: 1rem; }
#toggleCartButton .cart-btn-label { letter-spacing: 0.2px; }
#toggleCartButton .cart-btn-count {
    background: #fff;
    color: #1e293b;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: 800;
}

#newChatButton {
    position: absolute;
    left: 1rem; /* tout à gauche */
    top: 50%;
    transform: translateY(-50%);
}