.ribbon-button{color:var(--wa-text);border-radius:var(--wa-bottom-ribbon-button-radius,8px);width:var(--wa-bottom-ribbon-button-size,54px);min-width:var(--wa-bottom-ribbon-button-size,54px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;touch-action:pan-x;border:1px solid #0000;flex-direction:column;flex:none;justify-content:space-between;align-items:center;gap:0;padding:0;text-decoration:none;transition:color .15s,border-color .15s,box-shadow .15s,transform .15s;display:flex;position:relative;overflow:hidden}.chat-bottom-ribbon-scroll .ribbon-button{flex:none}.ribbon-button:focus{outline:none}.ribbon-button:before{content:"";border-radius:inherit;background:var(--wa-active);opacity:0;transform-origin:50%;pointer-events:none;transition:opacity .15s;position:absolute;inset:0;transform:scaleX(.35)}.ribbon-button:hover{color:var(--wa-text)}.ribbon-button__icon{color:currentColor;width:var(--wa-bottom-ribbon-icon-size,1.45rem);height:var(--wa-bottom-ribbon-icon-size,1.45rem);flex:0 0 var(--wa-bottom-ribbon-icon-size,1.45rem);z-index:1;justify-content:center;align-items:center;font-size:1rem;line-height:1;display:flex;position:relative}.ribbon-button__icon svg{display:block}.ribbon-button__avatar{width:var(--wa-bottom-ribbon-icon-size,1.45rem);height:var(--wa-bottom-ribbon-icon-size,1.45rem);min-width:var(--wa-bottom-ribbon-icon-size,1.45rem);min-height:var(--wa-bottom-ribbon-icon-size,1.45rem);max-width:var(--wa-bottom-ribbon-icon-size,1.45rem);max-height:var(--wa-bottom-ribbon-icon-size,1.45rem);box-sizing:border-box;border:0;border-radius:999px;place-items:center;padding:0;display:grid;overflow:hidden}.ribbon-button__avatar-image,.ribbon-button__avatar-image img{width:100%;height:100%;display:block}.ribbon-button__avatar-image img{object-fit:cover}.ribbon-button__avatar-emoji{text-align:center;place-items:center;width:100%;height:100%;font-size:1.05rem;line-height:1;display:grid}.ribbon-button__avatar-fallback{width:1.05rem;height:1.05rem;display:block}.ribbon-button__label{color:currentColor;z-index:1;max-width:100%;font-size:var(--wa-bottom-ribbon-label-size,.62rem);line-height:var(--wa-bottom-ribbon-label-line-height,1.1);letter-spacing:.01em;white-space:nowrap;text-overflow:clip;font-weight:400;display:block;position:relative;overflow:hidden}.ribbon-button__update-dot{width:8px;height:8px;box-shadow:0 0 0 2px var(--wa-chat-bg);background:#3b82f6;border-radius:999px;position:absolute;top:-2px;right:-3px}.ribbon-button__count-pill{z-index:2;color:#fff;min-width:17px;height:17px;box-shadow:none;box-sizing:border-box;letter-spacing:0;pointer-events:none;background:#2563eb;border:0;border-radius:999px;justify-content:center;align-items:center;padding:0 5px;font-size:.58rem;font-weight:700;line-height:1;display:inline-flex;position:absolute;top:2px;right:5px}.ribbon-button.is-active{color:var(--wa-text);border-color:color-mix(in srgb, var(--wa-accent) 40%, var(--wa-border));box-shadow:0 0 0 1px color-mix(in srgb, var(--wa-accent) 18%, transparent), inset 0 1px 0 #ffffff0f}.ribbon-button.is-active:before{opacity:1;animation:.42s cubic-bezier(.22,1,.36,1) both ribbon-button-active-fill-grow;transform:scaleX(1)}.binds-list-page~.chat-bottom-ribbon .ribbon-button.is-active:before{animation:none}.ribbon-button.is-active .ribbon-button__icon{color:currentColor}.ribbon-button.is-active:hover,:root[data-theme=light] .ribbon-button.is-active .ribbon-button__icon,:root[data-theme=light] .ribbon-button.is-active .ribbon-button__label{color:var(--wa-text)}:root:not([data-theme=light]) .ribbon-button.is-active{color:#f7fbff;border-color:color-mix(in srgb, var(--wa-accent) 58%, var(--wa-border));box-shadow:0 0 0 1px color-mix(in srgb, var(--wa-accent) 24%, transparent), 0 8px 18px #00000047, inset 0 1px 0 #ffffff14}:root:not([data-theme=light]) .ribbon-button.is-active:before{background:linear-gradient(180deg, color-mix(in srgb, var(--wa-accent) 24%, var(--wa-active)) 0%, color-mix(in srgb, var(--wa-accent) 12%, var(--wa-active)) 100%);opacity:1}:root:not([data-theme=light]) .ribbon-button.is-active .ribbon-button__icon{color:#fff;text-shadow:none}:root:not([data-theme=light]) .ribbon-button.is-active .ribbon-button__label{color:#fff}@keyframes ribbon-button-active-fill-grow{0%{opacity:0;transform:scaleX(.35)}to{opacity:1;transform:scaleX(1)}}