.qira-pb { --pb-height: 64px; --pb-pad: 8px; --pb-gap: 6px; --pb-slot-size: 48px; --pb-radius: 999px; --pb-bg: rgba(255, 255, 255, .55); --pb-blur: 12px; --pb-slot-bg: rgba(255, 255, 255, .90); --pb-slot-shadow: 0 1px 4px rgba(0,0,0,0.08); --pb-active-grad: linear-gradient(45deg, #5c8dff 0%, #a079ff 50%, #d06ad6 100%); --pb-active-color:#fff; --pb-sep-color: rgba(91, 63, 214, .18); } .qira-pb-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .qira-pb-glow { position: absolute; inset: -70px -100px; width: calc(100% + 200px); height: calc(100% + 140px); object-fit: cover; border-radius: 50%; filter: blur(48px); opacity: .9; pointer-events: none; z-index: 0; } .qira-pb { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--pb-gap); padding: var(--pb-pad); height: var(--pb-height); border-radius: var(--pb-radius); transition: width .4s cubic-bezier(0.34, 1.4, .64, 1); will-change: width; background: var(--pb-bg); backdrop-filter: blur(var(--pb-blur)); -webkit-backdrop-filter: blur(var(--pb-blur)); box-shadow: 0 4px 24px rgba(80, 40, 180, .10), 0 1px 6px rgba(80, 40, 180, .08); } .qira-pb::before { content: ''; position: absolute; inset: 0; border-radius: var(--pb-radius); background: linear-gradient( 125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 8%, rgba(255,255,255,0.40) 40%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.40) 60%, rgba(255,255,255,0.85) 92%, rgba(255,255,255,0) 100% ); opacity: .7; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; pointer-events: none; } .qira-pb, .qira-pb * { cursor: default; } .qira-pb__slot { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; height: var(--pb-slot-size); border: none; padding: 0 12px; background: var(--pb-slot-bg); box-shadow: var(--pb-slot-shadow); transition: background .25s ease, width .4s cubic-bezier(0.34, 1.4, .64, 1), padding .4s ease; overflow: hidden; white-space: nowrap; will-change: background, width; } .qira-pb__slot img { width: 24px; height: 24px; flex-shrink: 0; display: block; } .qira-pb__slot svg:not(.qira-pb__rec-icon):not(.qira-pb__feedback-wave) { width: 24px; height: 24px; flex-shrink: 0; } .qira-pb__slot--round { width: var(--pb-slot-size); height: var(--pb-slot-size); border-radius: 50%; padding: 0; overflow: hidden; } .qira-pb__slot--qira img { width: 28px; height: 28px; } .qira-pb__slot--qira::after { content: ''; position: absolute; right: calc(-1 * var(--pb-gap) / 2 - .5px); top: 20%; height: 60%; width: 1px; background: var(--pb-sep-color); } .qira-pb__split { display: inline-flex; align-items: center; height: var(--pb-slot-size); border-radius: 999px; background: var(--pb-slot-bg); box-shadow: var(--pb-slot-shadow); overflow: hidden; flex-shrink: 0; } .qira-pb__slot--split { background: transparent; box-shadow: none; border-radius: 0; height: 100%; padding: 0 14px; min-width: 52px; } .qira-pb__slot--chat::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--pb-sep-color); } .qira-pb__slot--round.is-active { background: var(--pb-active-grad); width: auto; min-width: var(--pb-slot-size); border-radius: 999px; } .qira-pb__slot--split.is-active { background: var(--pb-active-grad); } .qira-pb__slot:not(.qira-pb__slot--qira) { color: #6c43c6; } .qira-pb__slot.is-active:not(.qira-pb__slot--pay-attn) { color: #fff; } .qira-pb__slot--camera { display: none; background: var(--pb-active-grad); color: #fff; } .qira-pb[data-state="live"] .qira-pb__slot--camera { display: inline-flex; } .qira-pb[data-state="live"] .qira-pb__slot--catch-me-up { display: none; } .qira-pb[data-state="live"] .qira-pb__slot--pay-attn { display: none; } .qira-pb__slot--live .qira-pb__live-icon { order: 0; } .qira-pb__slot--live .qira-pb__label { order: 1; } .qira-pb__slot--live.is-active .qira-pb__label { order: 0; } .qira-pb__slot--live.is-active .qira-pb__live-icon { order: 2; } .qira-pb__slot--catch-me-up .qira-pb__label { display: none; } .qira-pb__slot--pay-attn.is-active { background: var(--pb-slot-bg); border-radius: 999px; width: auto; height: var(--pb-slot-size); padding: 0 14px 0 12px; gap: 8px; overflow: visible; } .qira-pb__rec-icon { display: block; flex-shrink: 0; width: 24px; height: 24px; color: #6c43c6; transition: color .25s ease; } .qira-pb__slot--pay-attn.is-active .qira-pb__rec-icon { color: #fb575f; } .qira-pb__label { font-family: var(--qira-font); font-size: 15px; font-weight: var(--qira-fw-medium); color: var(--pb-active-color); max-width: 0; opacity: 0; overflow: hidden; transition: max-width .35s ease, opacity .2s ease; will-change: max-width, opacity; } .qira-pb__slot.is-active .qira-pb__label { max-width: 100px; opacity: 1; } .qira-pb__recording { display: none; align-items: center; align-self: stretch; flex: 1; overflow: hidden; } .qira-pb[data-state="pay-attention"] .qira-pb__recording { display: flex; } .qira-pb__feedback-wave { display: none; height: 22px; width: 80px; flex-shrink: 0; } .qira-pb[data-state="pay-attention"] .qira-pb__feedback-wave { display: block; } .qira-pb__chevron { display: none; flex-shrink: 0; align-items: center; } .qira-pb[data-state="pay-attention"] .qira-pb__chevron { display: flex; } .qira-pb__chevron path { stroke: rgba(108, 67, 198, .6); } .qira-pb .qira-pb__slot .qira-pb__chevron svg { width: 10px; height: 7px; } .qira-pb-wrap--fixed { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 100; } .qira-pb-wrap--inline { display: flex; justify-content: center; } @media (max-width: 767px) { .qira-pb { --pb-height: 54px; --pb-slot-size: 38px; --pb-pad: 6px; --pb-gap: 4px; } .qira-pb__slot--split { padding: 0 10px; min-width: 40px; } .qira-pb__label { font-size: 13px; } .qira-pb-wrap--fixed { bottom: 20px; } } .qira-pb__live-bar { transform-origin: center; } .qira-pb.is-pa-stopped .qira-pb__slot--pay-attn.is-active { width: var(--pb-slot-size); padding: 0 0 0 12px; justify-content: flex-start; overflow: hidden; } .qira-pb__slot--pay-attn { position: relative; } .qira-pb__pa-fill { position: absolute; inset: 0; z-index: 0; border-radius: 999px; background: var(--pb-active-grad); opacity: 0; pointer-events: none; } .qira-pb__slot--pay-attn .qira-pb__rec-icon, .qira-pb__slot--pay-attn .qira-pb__recording, .qira-pb__slot--pay-attn .qira-pb__chevron { position: relative; z-index: 1; } .qira-pb.is-pa-stopped .qira-pb__slot--pay-attn.is-active .qira-pb__rec-icon { color: #fff; } .qira-pb__slot--pay-attn .qira-pb__recording { min-width: 0; }