body { margin: 0; padding: 0; font-family: Arial, sans-serif; }

.wrap { display: flex; min-height: 100vh; }

.sidebar { width: 200px; padding: 16px; border-right: 1px solid #ccc; }
.brand { margin-bottom: 16px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { padding: 4px 0; cursor: pointer; }
.side-footer { margin-top: auto; font-size: 12px; color: #666; padding-top: 16px; }

.main { flex: 1; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.main-header { width: 100%; max-width: 500px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; }

.products { display: flex; flex-direction: row; gap: 16px; width: 100%; max-width: 800px; flex-wrap: wrap; justify-content: center; }
.product { padding: 12px; border: 1px solid #ccc; flex: 1; min-width: 180px; max-width: 220px; }
.product h4 { margin: 0 0 4px; }
.product p { margin: 0 0 8px; }

.chat-panel { position: fixed; right: 24px; bottom: 24px; width: 320px; border: 1px solid #ccc; padding: 12px; background: #fff; }
.chat-top { display: flex; justify-content: space-between; margin-bottom: 8px; }
.chat-box { height: 200px; overflow: auto; border: 1px solid #eee; padding: 8px; margin-bottom: 8px; }
.chat-box p { margin: 4px 0; }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; padding: 6px; }

.center-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 16px; }
.input-row { display: flex; gap: 8px; }

.hidden { display: none; }
.overlay-in  { animation: overlayIn  700ms ease forwards; }
.overlay-out { animation: overlayOut 700ms ease forwards; }
.main-enter  { animation: mainEnter  700ms ease forwards; }
@keyframes overlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mainEnter  { from { opacity: 0; } to { opacity: 1; } }

.logo {
  width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(90deg, #3b2fd6, #00b0ff);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; color: #001029; font-size: 22px;
  animation: logoPulse 2000ms infinite;
}
@keyframes logoPulse {
  0%   { box-shadow: 0 6px 16px rgba(59,47,214,0.18); transform: translateY(0) scale(1); }
  50%  { box-shadow: 0 12px 36px rgba(0,176,255,0.18); transform: translateY(-4px) scale(1.03); }
  100% { box-shadow: 0 6px 16px rgba(59,47,214,0.18); transform: translateY(0) scale(1); }
}

.welcome-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.welcome-panel { text-align: center; }