/* container com degradê e cantos arredondados */
.topbar-wrap{
  position: sticky; top: 0; z-index: 20;
  padding: 8px clamp(8px, 2vw, 16px);
  background:
    radial-gradient(1200px 80px at 0% 0%, rgba(102,126,234,.15), transparent),
    radial-gradient(1200px 80px at 100% 0%, rgba(236,72,153,.15), transparent);
  backdrop-filter: saturate(120%) blur(2px);
}

/* barra */
.topbar{
  height: 56px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  box-shadow: 0 2px 14px rgba(18,22,33,.06);
}
.tb-left{ display: flex; align-items: center; gap: 12px; min-width: 0 }
.tb-right{ margin-left: auto; display: flex; align-items: center; gap: 10px }

/* hamburger */
.hamburger{
  border: 1px solid var(--line); background:#fff; border-radius: 12px;
  height: 38px; width: 38px; display:grid; place-items:center; cursor:pointer;
}
@media (min-width:1025px){ .hamburger{ display:none } }

/* chips (hora, clima, trânsito, manchete) */
.smart-info{ display:flex; align-items:center; gap:8px; min-width:0 }
.chip{
  --bg:#f6f7ff;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; background:var(--bg);
  border:1px solid var(--line); font-weight:600; color:#2b2f3b; white-space:nowrap;
  max-width:28ch; overflow:hidden; text-overflow:ellipsis;
}
.chip.link{ text-decoration:none }
.chip:hover{ background:#eef1ff }

/* título da página */
.tb-title{
  margin-left:8px; font-weight:800; color:#2b2f3b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ícone do sino */
.icon-btn{
  position:relative; height:38px; width:38px;
  display:grid; place-items:center;
  border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer;
}
.icon-btn .dot{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:#ff3b3b; box-shadow:0 0 0 2px #fff;
}

/* avatar + dropdown */
.avatar-menu{ position:relative }
.avatar-btn{
  border: 1px solid var(--line); background:#fff; border-radius:999px; padding:0;
  height:36px; width:36px; overflow:hidden; cursor:pointer;
}
.avatar-btn img{ display:block; width:100%; height:100%; object-fit:cover }

.avatar-menu .menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:220px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 10px 30px rgba(25,30,58,.08);
  padding:6px; display:none; z-index:60;
}
.avatar-menu .menu[aria-hidden="false"]{ display:block }

.menu-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  color:#1f2937; background:none; border:0; cursor:pointer;
  font-weight:600; font-size:14px;
}
.menu-item:hover{ background:#f6f7ff }
.menu-item.danger{ color:#b42318 }
.menu-sep{ height:1px; background:var(--line); margin:6px; border-radius:1px }

/* responsividade: esconde chips longos em telas menores */
/* responsividade: vai escondendo alguns chips conforme a largura */
@media (max-width:980px){ #chip-news{ display:none } }
@media (max-width:760px){ #chip-traffic{ display:none } }

/* MOBILE: manter APENAS hora e clima visíveis */
@media (max-width:640px){
  .smart-info{
    display:flex;            /* volta a mostrar os chips no mobile */
    align-items:center;
    gap:6px;
    margin-left:4px;
    min-width:0;
    flex-shrink:1;
  }
  /* esconde os que não queremos no mobile */
  #chip-traffic, #chip-news{ display:none !important; }

  /* chips mais compactos pra caber melhor */
  .chip{
    padding:5px 8px;
    font-weight:600;
    font-size:12px;
    max-width:18ch;          /* evita estourar a linha */
  }

  /* se faltar espaço, deixa o título priorizar e os chips encolherem */
  .tb-left{ gap:8px; min-width:0; }
  .tb-title{ flex:1 1 auto; min-width:0 }
  #chip-time, #chip-weather{ flex:0 1 auto }
}