/* semplice reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

:root{
  --bg:#0f0f10;
  --accent:#ffffff;
  --muted:#9b9b9b;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

.logo img {
  width: 80% !important;
  height: 80% !important;
  object-fit: contain !important;
}

/* Topbar e brand */
body{
  background: radial-gradient(1200px 400px at 50% 0%, rgba(0,0,0,0.25), transparent), var(--bg);
  color:#d9d9d9;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

.topbar{
  width:100%;
  max-width:1180px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  margin-top:18px;
}

.brand{ display:flex; align-items:center; gap:10px; }

/* Contenitore del logo: dimensione e "scatola" */
.logo{
  width:40px;        /* dimensione scatola */
  height:40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}


.logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* brand name */
.brand-name{
  font-weight:700;
  color:#e6f7ff;
}

/* card e resto stile base (semplificato) */
.container{ width:100%; max-width:1180px; padding:28px 20px; display:flex; justify-content:center; }
.chat-card{
  width:100%; height:560px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  padding:28px; display:flex; align-items:center; justify-content:center;
}
.greeting{ color: var(--accent); font-size: clamp(28px,4.5vw,48px); font-weight:700; text-transform:lowercase; }

/* responsive */
@media (max-width:720px){
  .logo{ width:34px; height:34px; }
  .greeting{ font-size:28px; }
}