/* Панель форматирования и эмодзи-пикер */
/* ===== toolbar & emoji ===== */
.tb{
  position:absolute;z-index:6;display:flex;gap:4px;align-items:center;padding:4px;border-radius:18px;background:var(--pill);
  box-shadow:0 14px 34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  transform:translate(-50%,-100%);animation:tbin .25s var(--spring) both;
}
@keyframes tbin{from{opacity:0;transform:translate(-50%,-90%) scale(.9)}to{opacity:1;transform:translate(-50%,-100%)}}
.tb button{display:flex;align-items:center;gap:4px;padding:8px;border-radius:12px;color:#fff;font-size:16px;line-height:normal;
  transition:background-color .2s,transform .25s var(--spring)}
.tb button svg{width:18px;height:18px;flex:none;display:block}
.tb button .lb{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .3s var(--spring),opacity .2s}
.tb button:hover,.tb button.on{background:rgba(255,255,255,.12)}
.tb button:hover .lb{max-width:140px;opacity:1}
.tb button:active{transform:scale(.9)}
.emo{position:absolute;z-index:6;right:20px;bottom:calc(100% + 10px);display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:6px;border-radius:18px;
  background:var(--pill);box-shadow:0 14px 34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);animation:tbin2 .25s var(--spring) both}
@keyframes tbin2{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.emo button{font-size:20px;line-height:1;padding:7px;border-radius:12px;transition:transform .25s var(--spring),background-color .2s}
.emo button:hover{background:rgba(255,255,255,.12);transform:scale(1.18)}
.emo button:active{transform:scale(.88)}
