/* ---------- Dock do topo: tema, notificações e perfil ---------- */
/* Os três eram círculos soltos de tamanhos diferentes — 38px o tema, 34px o sino e
   39px o avatar. Agora dividem uma barra só, com a mesma fatia, e o item apontado
   se abre numa pílula clara mostrando o nome dele. Só o item aberto tem fundo; o
   resto fica em ícone puro, para a barra não virar uma fileira de botões.

   Três cuidados que o código impõe e não são óbvios:
   1. O rótulo mora no .dock-slot, e não dentro do botão: o theme.js reescreve o
      innerHTML do botão de tema (hydrateThemeToggles) e apagaria qualquer filho.
   2. TUDO aqui é escopado por .topbar-dock. O #shellProfileBlock é movido de verdade
      para o rail da caixa de entrada (inbox.js:160) e volta pelo restoreShellBlocks;
      sem o escopo, a pílula apareceria dentro do rail junto com ele.
   3. Nada de overflow:hidden no dock: os dois menus e os tooltips são absolutos e
      abrem para fora. Quem recorta o rótulo é o próprio rótulo, com max-width. */

.topbar-dock{display:flex;align-items:center;gap:2px;height:46px;padding:0 5px;border:1px solid var(--line);border-radius:999px;background:var(--white);box-shadow:0 6px 18px rgba(13,31,28,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.topbar-dock .dock-slot{position:relative;display:flex;align-items:center;border-radius:999px;background:transparent;transition:background .28s cubic-bezier(.2,.8,.2,1)}
.topbar-dock .dock-slot:hover,.topbar-dock .dock-slot:focus-within,
.topbar-dock .shell-notif-block:has(.notification-menu.open),
.topbar-dock .shell-profile-block:has(.profile-menu.open){background:var(--line-soft)}

/* o rótulo abre junto com a pílula; max-width anima, width:auto não */
.topbar-dock .dock-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font:600 12.5px var(--font-body);color:var(--ink);letter-spacing:-.01em;transition:max-width .32s cubic-bezier(.2,.8,.2,1),opacity .22s,padding .32s;pointer-events:none}
.topbar-dock .dock-slot:hover .dock-label,.topbar-dock .dock-slot:focus-within .dock-label,
.topbar-dock .shell-notif-block:has(.notification-menu.open) .dock-label,
.topbar-dock .shell-profile-block:has(.profile-menu.open) .dock-label{max-width:130px;opacity:1;padding-right:15px}

/* os três botões passam a ter a mesma fatia. O .theme-toggle mantém o overflow:hidden
   dele: é o que recorta o cruzamento sol/lua */
.topbar-dock .dock-btn{position:relative;width:40px;height:40px;padding:0;border:0;background:none;border-radius:999px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:color .25s}
.topbar-dock .theme-toggle,.topbar-dock .icon-btn,.topbar-dock .profile-trigger{width:40px;height:40px;border:0;background:none;border-radius:999px;box-shadow:none}
.topbar-dock .theme-toggle:hover,.topbar-dock .icon-btn:hover,.topbar-dock .profile-trigger:hover{transform:none;box-shadow:none;border-color:transparent;background:none}
.topbar-dock .dock-slot:hover .dock-btn,.topbar-dock .dock-slot:focus-within .dock-btn{color:var(--ink)}
.topbar-dock .dock-btn:focus-visible{outline:2px solid var(--green);outline-offset:-2px}

.topbar-dock .profile-trigger .avatar{width:30px;height:30px;font-size:10px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.topbar-dock .dock-slot:hover .profile-trigger .avatar{transform:scale(1.06)}

/* A foto de perfil por cima das iniciais. A regra é por ID, e não sob .topbar-dock,
   de propósito: a caixa de entrada MOVE este mesmo nó para o rail dela (inbox.js:160),
   e lá o .avatar base de styles.css:53 não tem position nem overflow — sem isto a
   imagem escaparia do círculo. Fica completa aqui em vez de depender do
   avatar-photo.css, que só é injetado nas telas de Equipe, Usuários e Perfil. */
#profileAvatar{position:relative;overflow:hidden}
#profileAvatar .av-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* o ponto vermelho de não lidas, recolocado para a fatia do dock */
.main-topbar .topbar-dock .icon-btn.notification i{top:6px;right:7px;box-shadow:0 0 0 2px var(--white)}

/* o tooltip era ancorado à direita porque o topbar alinhava tudo à direita e o avatar
   era o último. Como agora o próprio rótulo diz o nome do item, ele sai de cena. */
.topbar-dock .tt-trigger::after,.topbar-dock .tt-trigger::before{display:none}

/* ---------- tema escuro ---------- */
[data-theme="dark"] .topbar-dock{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme="dark"] .topbar-dock .dock-slot:hover,[data-theme="dark"] .topbar-dock .dock-slot:focus-within,
[data-theme="dark"] .topbar-dock .shell-notif-block:has(.notification-menu.open),
[data-theme="dark"] .topbar-dock .shell-profile-block:has(.profile-menu.open){background:rgba(255,255,255,.1)}
[data-theme="dark"] .topbar-dock .dock-btn{color:var(--dark-muted)}
[data-theme="dark"] .topbar-dock .dock-slot:hover .dock-btn,[data-theme="dark"] .topbar-dock .dock-slot:focus-within .dock-btn{color:var(--dark-ink)}
[data-theme="dark"] .topbar-dock .dock-label{color:var(--dark-ink)}
[data-theme="dark"] .main-topbar .topbar-dock .icon-btn.notification i{box-shadow:0 0 0 2px #0f2421}

@media(max-width:720px){
  .topbar-dock{height:42px}
  .topbar-dock .dock-btn,.topbar-dock .theme-toggle,.topbar-dock .icon-btn,.topbar-dock .profile-trigger{width:36px;height:36px}
  .topbar-dock .dock-slot:hover .dock-label,.topbar-dock .dock-slot:focus-within .dock-label{max-width:0;opacity:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .topbar-dock .dock-slot,.topbar-dock .dock-label,.topbar-dock .dock-btn,.topbar-dock .profile-trigger .avatar{transition:none}
}