/* Dock lateral do tutor + botão-bolha flutuante. Visibilidade controlada pela classe .dock-aberto no (igual ao tema). */ .dock-bolha { position: fixed; right: var(--esp-5); bottom: var(--esp-5); width: 56px; height: 56px; border-radius: 50%; background: var(--cor-primaria); color: #fff; border: none; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); z-index: 45; transition: background var(--transicao), transform var(--transicao); } .dock-bolha:hover { background: var(--cor-primaria-forte); transform: translateY(-2px); } .tema-escuro .dock-bolha { color: #06201c; } .dock-aberto .dock-bolha { display: none; } .dock { position: fixed; inset: 0 0 0 auto; width: 380px; max-width: 92vw; background: var(--cor-superficie); border-left: 1px solid var(--cor-borda); display: none; flex-direction: column; z-index: 46; box-shadow: var(--sombra); } .dock-aberto .dock { display: flex; } .dock__cabecalho { display: flex; align-items: center; justify-content: space-between; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--cor-borda); flex-shrink: 0; } .dock__titulo { font-weight: 700; } .dock__acoes { display: flex; gap: var(--esp-1); } .dock__botao { background: none; border: none; padding: var(--esp-2); color: var(--cor-texto-suave); display: flex; border-radius: var(--raio-sm); } .dock__botao:hover { background: var(--cor-superficie-2); color: var(--cor-primaria); } .dock__corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--esp-3); overflow: hidden; } .dock__corpo .chat { flex: 1; min-height: 0; border: none; border-radius: 0; } .dock__corpo .lista-conversas { overflow-y: auto; } /* Desktop largo: empurra o conteúdo em vez de sobrepor. */ @media (min-width: 1200px) { .dock-aberto .conteudo { margin-right: 380px; } } /* Mobile: dock em tela cheia. */ @media (max-width: 640px) { .dock { width: 100vw; max-width: 100vw; } .dock-bolha { right: var(--esp-4); bottom: var(--esp-4); } }