/* Lo sticky sta sul contenitore, non sulla barra: dentro un guscio alto quanto
   sé stessa la barra non avrebbe spazio per restare in alto. */
.shell-host { position: sticky; top: 0; z-index: 30; }
.topbar { background: rgba(15,23,42,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid #1f2937; }
.topbar-inner { max-width: 960px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.tb-logo { height: 34px; width: auto; flex: 0 0 auto; }
.tb-title { font-weight: 700; color: #fbbf24; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tb-home { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 8px; border: 1px solid #fbbf24; background: rgba(251,191,36,.12); color: #fbbf24; font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.tb-home:hover { background: #fbbf24; color: #1a1205; }
.tb-team { font-weight: 700; color: #e2e8f0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-icon { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #374151; background: #1f2937; color: #e2e8f0; cursor: pointer; font-size: 1.1rem; padding: 0; margin: 0; }
.tb-icon:hover { border-color: #fbbf24; }
.tb-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 40; }
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: #0f172a; border-left: 1px solid #1f2937; box-shadow: -8px 0 30px rgba(0,0,0,0.4); transform: translateX(100%); transition: transform .25s ease; z-index: 50; display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #1f2937; font-weight: 700; color: #fbbf24; }
.drawer-close { width: auto; margin: 0; padding: 6px 11px; background: #1f2937; border: 1px solid #374151; color: #e2e8f0; font-size: 1rem; }
.drawer-close:hover { border-color: #fbbf24; }
.drawer .chat { flex: 1; min-height: 0; padding: 14px; }
.drawer .chat-scroll { max-height: none; flex: 1; }
/* Sul telefono il nome della squadra e le due icone vengono prima del titolo. */
@media (max-width: 480px) {
  .topbar-inner { padding: 10px 12px; gap: 8px; }
  .tb-title { display: none; }
  .tb-team { max-width: 130px; }
}
/* Su schermi stretti il pulsante resta, ma come sola freccia. */
@media (max-width: 620px) {
  .tb-home { padding: 0 12px; }
  .tb-home span { display: none; }
}