/* ===== Jimbo Social: Short Stories ===== */
.ss-ring { display: block !important; padding: .2rem 0 .1rem; }
.ss-ring__h { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .45rem; padding: 0 .1rem; }
.ss-ring__h b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 900; letter-spacing: -.01em; }
.ss-ring__h span { display: inline-flex; align-items: center; gap: .25rem; font-size: 12px; font-weight: 700; color: var(--js-mut, var(--color-text-muted)); }
.ss-ring__h .js-i { width: 13px; height: 13px; }
.ss-ring__row { display: flex; gap: .7rem; overflow-x: auto; scrollbar-width: none; padding: .2rem .1rem .5rem; scroll-snap-type: x proximity; }
.ss-ring__row::-webkit-scrollbar { display: none; }
.ss-r { flex: none; width: 74px; display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--color-text); font: inherit; cursor: pointer; scroll-snap-align: start; }
.ss-r__ring { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; padding: 3px;
  background: conic-gradient(from 0deg, #ff6b1a 0deg, #e5262b calc(var(--f, 360deg) * .5), #ffb23f var(--f, 360deg), rgb(128 128 128 / .22) var(--f, 360deg)); }
.ss-r.is-seen .ss-r__ring { background: conic-gradient(rgb(128 128 128 / .55) var(--f, 360deg), rgb(128 128 128 / .18) var(--f, 360deg)); }
.ss-r__ring > img, .ss-r__ring > span:first-child, .ss-r__ring .js-av { width: 62px !important; height: 62px !important; border-radius: 50%; border: 3px solid var(--color-bg); object-fit: cover; }
.ss-r.is-new .ss-r__ring { animation: ssPulse 2.4s ease-in-out infinite; }
@keyframes ssPulse { 50% { box-shadow: 0 0 0 4px rgb(255 107 26 / .18); } }
.ss-r__k { position: absolute; right: -2px; bottom: -2px; width: 24px !important; height: 24px !important; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--color-bg) !important; color: #fff; }
.ss-r__k .js-i { width: 13px; height: 13px; }
.ss-r__k--cam { background: #2dd4bf; color: #062b27; } .ss-r__k--vid { background: #e5262b; } .ss-r__k--cb { background: #161513; color: #ffb23f; }
.ss-r small { font-size: 11.5px; font-weight: 800; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.ss-r em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--js-mut, var(--color-text-muted)); line-height: 1; }
.ss-r--add .ss-r__ring { background: none; border: 2px dashed rgb(128 128 128 / .5); }
.ss-r--add .ss-r__ring b { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #ff6b1a; color: #fff; border: 2px solid var(--color-bg); }
.ss-r--add .ss-r__ring b .js-i { width: 14px; height: 14px; stroke-width: 3; }
.ss-r__plus { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-2, rgb(128 128 128 / .15)); }
.ss-ring__hint { align-self: center; margin: 0; max-width: 240px; font-size: 12.5px; font-weight: 600; color: var(--js-mut, var(--color-text-muted)); line-height: 1.35; }

/* ---------- full-screen viewer ---------- */
.ss-v, .ss-c { position: fixed; inset: 0; z-index: 130; background: #050505; display: grid; place-items: center; color: #fff; -webkit-user-select: none; user-select: none; }
.ss-v *, .ss-c * { box-sizing: border-box; }
.ss-v__box, .ss-c__box { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: 100dvh; max-height: 100dvh; overflow: hidden; background: #111; display: flex; flex-direction: column; }
@media (min-width: 700px) { .ss-v__box, .ss-c__box { height: min(94dvh, 900px); width: calc(min(94dvh, 900px) * 9 / 16); border-radius: 18px; box-shadow: 0 30px 80px rgb(0 0 0 / .6); } }
.ss-v__box.is-in-r { animation: ssInR .32s cubic-bezier(.2, .8, .3, 1); } .ss-v__box.is-in-l { animation: ssInL .32s cubic-bezier(.2, .8, .3, 1); }
@keyframes ssInR { from { transform: translateX(30%) rotateY(-14deg); opacity: .3; } } @keyframes ssInL { from { transform: translateX(-30%) rotateY(14deg); opacity: .3; } }
.ss-v__bars { position: absolute; z-index: 5; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; gap: 4px; pointer-events: none; }
.ss-v__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .32); overflow: hidden; }
.ss-v__bars b { display: block; height: 100%; background: #fff; border-radius: 2px; }
.ss-v__h { position: absolute; z-index: 5; top: calc(max(8px, env(safe-area-inset-top)) + 10px); left: 10px; right: 6px; display: flex; align-items: center; gap: .5rem; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.ss-v__h .js-av, .ss-v__h img { width: 36px !important; height: 36px !important; border-radius: 50%; border: 2px solid #fff; flex: none; }
.ss-v__who { color: #fff; font-weight: 900; font-size: 14.5px; text-decoration: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-v__meta { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-v__ib { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / .28); color: #fff; cursor: pointer; padding: 0; }
.ss-v__ib .js-i { width: 20px; height: 20px; } .ss-v__ib:focus-visible { outline: 2px solid #ffb23f; }
.ss-v__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; -webkit-touch-callout: none; background: #000; }
.ss-v__blur { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(26px) brightness(.6); transform: scale(1.1); }
.ss-v__img, .ss-v__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ss-v__stage--vid .ss-v__vid { object-fit: cover; }
.ss-v__img--cb { object-fit: cover; opacity: .55; }
.ss-v__cap { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: .5rem .7rem; border-radius: 12px; background: rgb(0 0 0 / .45); font-size: 14px; font-weight: 600; text-align: center; }
.ss-tx { position: absolute; z-index: 3; left: 50%; bottom: 16%; transform: translateX(-50%) rotate(-1.5deg); max-width: 86%; margin: 0; padding: .35rem .75rem; border-radius: 10px; background: #fff; color: #111; font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 5.4vw, 26px); line-height: 1.15; text-align: center; box-shadow: 0 8px 22px rgb(0 0 0 / .35); overflow-wrap: anywhere; pointer-events: none; }
.ss-stk { position: absolute; z-index: 4; transform: translate(-50%, -50%) rotate(-6deg); padding: .4rem .8rem; border-radius: 12px; font-family: var(--font-display); font-weight: 900; font-size: clamp(17px, 5vw, 24px); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 10px 24px rgb(0 0 0 / .4); pointer-events: none; }
.ss-stk--0 { background: #ffb23f; color: #141414; border: 3px solid #141414; }
.ss-stk--1 { background: #e5262b; color: #fff; border: 3px solid #fff; transform: translate(-50%, -50%) rotate(4deg); }
.ss-stk--2 { background: #141414; color: #ffb23f; border: 2px solid #ffb23f; text-shadow: 0 0 8px rgb(255 178 63 / .7); font-family: ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.ss-stk--3 { background: #2dd4bf; color: #062b27; border: 3px dashed #062b27; transform: translate(-50%, -50%) rotate(-3deg); }
.ss-stk.is-drag { pointer-events: auto; cursor: grab; touch-action: none; animation: ssWig 2.8s ease-in-out infinite; }
.ss-stk.is-moving { cursor: grabbing; animation: none; transform: translate(-50%, -50%) scale(1.12) rotate(-4deg); }
@keyframes ssWig { 50% { transform: translate(-50%, -50%) rotate(-2deg) scale(1.04); } }
.ss-v__paused { position: absolute; z-index: 6; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .45); opacity: 0; transition: opacity .15s; pointer-events: none; }
.ss-v__paused .js-i { width: 28px; height: 28px; }
.is-held .ss-v__paused { opacity: 1; } .is-held .ss-v__bars, .is-held .ss-v__h { opacity: .25; transition: opacity .2s; }
.is-tx .ss-v__paused { opacity: 0; }
/* voice scenes */
.ss-v__bg { position: absolute; inset: 0; overflow: hidden; }
.ss-road { position: absolute; left: 50%; bottom: -10%; width: 70%; height: 60%; transform: translateX(-50%) perspective(260px) rotateX(58deg); background: linear-gradient(#2b2b2e, #151517); }
.ss-road::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6%; transform: translateX(-50%); background: repeating-linear-gradient(#ffb23f 0 30px, transparent 30px 60px); animation: ssRoad .8s linear infinite; }
@keyframes ssRoad { to { background-position: 0 60px; } }
.ss-bg0 { background: radial-gradient(circle at 50% 30%, #1f3a5f, #0b1424 60%, #05080f); }
.ss-bg0::before { content: ""; position: absolute; inset: 0 0 50% 0; background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #fff, transparent), radial-gradient(1px 1px at 85% 50%, #fff, transparent), radial-gradient(1px 1px at 10% 70%, #fff, transparent); opacity: .7; }
.ss-bg1 { background: linear-gradient(180deg, #ff7a3d 0%, #ff4d6d 38%, #6b2a6b 62%, #1b1030 100%); }
.ss-bg1::before { content: ""; position: absolute; left: 50%; top: 34%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #ffe08a, #ff9f43 60%, transparent 62%); }
.ss-bg2 { background: linear-gradient(135deg, #d9dde2, #8a9099 30%, #f4f6f8 50%, #6d737c 72%, #c6cbd1); }
.ss-bg3 { background: linear-gradient(180deg, #8ec5ff 0%, #cfe8ff 38%, #f7d65a 40%, #c9a227 62%, #5b7a2a 100%); }
.ss-bg4 { background: radial-gradient(circle at 30% 30%, #ff3ea5, transparent 45%), radial-gradient(circle at 75% 60%, #14e0d0, transparent 45%), #120a1f; }
.ss-bg5 { background: linear-gradient(180deg, #2a313b, #4b5563 45%, #1f2937); }
.ss-bg5::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 14px, rgb(255 255 255 / .08) 14px 15px); animation: ssRain .5s linear infinite; }
@keyframes ssRain { to { background-position: -15px 40px; } }
.ss-bg6 { background: radial-gradient(circle at 50% 35%, #ffb23f, #ff6b1a 55%, #b8360a); }
.ss-bg7 { background: #050505; }
.ss-cb { position: absolute; z-index: 2; left: 8%; right: 8%; top: 36%; transform: translateY(-50%); }
.ss-cb__ant { position: absolute; left: 50%; top: -58px; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #161513; color: #ffb23f; box-shadow: 0 0 0 0 rgb(255 178 63 / .5); }
.ss-cb__ant .js-i { width: 26px; height: 26px; }
.ss-cb.is-live .ss-cb__ant { animation: ssAnt 1s ease-out infinite; }
@keyframes ssAnt { to { box-shadow: 0 0 0 26px rgb(255 178 63 / 0); } }
.ss-cb__set { padding: .8rem .85rem .7rem; border-radius: 20px; background: linear-gradient(180deg, #34302b, #1d1b18 40%, #141311); border: 1px solid #45403a; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 24px 50px -18px rgb(0 0 0 / .8); }
.ss-cb__top { display: flex; gap: .5rem; align-items: center; }
.ss-cb__lcd { font: 700 24px/1 ui-monospace, Menlo, monospace; color: #ffb23f; background: #0c0b09; padding: .35rem .45rem; border-radius: 7px; text-shadow: 0 0 8px rgb(255 178 63 / .7); white-space: nowrap; }
.ss-cb__lcd small { font-size: 10px; margin-right: .2rem; opacity: .7; }
.ss-cb__dot { flex: 1; min-width: 0; overflow: hidden; height: 36px; display: flex; align-items: center; padding: 0 .55rem; border-radius: 7px; background: #0c0b09 radial-gradient(circle, rgb(255 178 63 / .07) 1px, transparent 1.2px) 0 0 / 4px 4px; }
.ss-cb__mq { font: 800 15px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: #ffb23f; text-transform: uppercase; text-shadow: 0 0 6px rgb(255 178 63 / .8); white-space: nowrap; }
.ss-cb.is-live .ss-cb__mq { animation: ssMq 6s linear infinite; }
@keyframes ssMq { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.ss-cb__wave { display: flex; align-items: center; gap: 3px; height: 60px; margin: .55rem 0 .35rem; }
.ss-cb__wave i { flex: 1; height: var(--h); min-height: 3px; border-radius: 2px; background: #ffb23f; opacity: .45; transform-origin: center; }
.ss-cb.is-live .ss-cb__wave i { opacity: 1; animation: ssBar .5s ease-in-out infinite alternate; }
.ss-cb.is-live .ss-cb__wave i:nth-child(3n) { animation-delay: -.2s; } .ss-cb.is-live .ss-cb__wave i:nth-child(3n+1) { animation-delay: -.35s; }
@keyframes ssBar { to { transform: scaleY(.45); } }
.ss-cb__ft { display: flex; justify-content: space-between; font: 700 12px/1 ui-monospace, Menlo, monospace; color: #a99c80; }
.ss-cb__rx { padding: 2px 5px; border-radius: 4px; background: #14532d; color: #4ade80; }
.ss-cb.is-live .ss-cb__rx { background: #22c55e; color: #052e14; }
.is-over .ss-cb__rx { background: #7f1d1d; color: #fecaca; }
/* footer */
.ss-v__foot { position: relative; z-index: 5; flex: none; padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / .85) 30%); margin-top: -40px; }
.ss-v__rx { display: flex; justify-content: center; gap: .35rem; margin-bottom: .45rem; }
.ss-v__rx button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; transition: transform .15s; }
.ss-v__rx button .js-i { width: 22px; height: 22px; }
.ss-v__rx button:active { transform: scale(1.25); }
.ss-v__rx button.is-on { background: #ffb23f; color: #141414; }
.ss-v__quick { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .45rem; }
.ss-v__quick::-webkit-scrollbar { display: none; }
.ss-v__quick button { flex: none; height: 30px; padding: 0 .7rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .25); color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.ss-v__quick button.is-sent { background: #22c55e; border-color: #22c55e; color: #052e14; }
.ss-v__form { position: relative; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ss-v__form input { flex: 1; min-width: 0; height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .4); background: rgb(0 0 0 / .3); color: #fff; font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
.ss-v__form input::placeholder { color: rgb(255 255 255 / .7); }
.ss-v__txh { position: absolute; left: 0; right: 0; bottom: 52px; height: 0; }
.ss-v__form .cb-tx { position: absolute; left: 0; right: 0; bottom: 52px; margin: 0; z-index: 3; }
.ss-v__cb { touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none; display: inline-flex; align-items: center; gap: .35rem; height: 44px; padding: 0 .8rem 0 .35rem; border-radius: 999px; border: 0; background: #e5262b; color: #fff; font: inherit; cursor: pointer; }
.ss-v__cb > .js-i { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.ss-v__cb span { display: grid; line-height: 1.1; text-align: left; } .ss-v__cb b { font-size: 13px; } .ss-v__cb small { font-size: 10.5px; opacity: .85; }
.ss-v__cb.is-tx { background: #b91c1c; box-shadow: 0 0 0 6px rgb(229 38 43 / .3); }
.ss-v__cb .cb-key__lock { display: none; }
.ss-v__own { display: flex; align-items: center; gap: .5rem; }
.ss-v__seen { display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .9rem; border-radius: 999px; border: 0; background: rgb(255 255 255 / .16); color: #fff; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; }
.ss-v__seen .js-i { width: 18px; height: 18px; }
.ss-v__rc { flex: 1; display: flex; gap: .5rem; flex-wrap: wrap; } .ss-v__rc span { display: inline-flex; align-items: center; gap: .2rem; font-weight: 800; font-size: 13px; } .ss-v__rc .js-i { width: 18px; height: 18px; color: #ffb23f; }
.ss-v__sheet { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; max-height: 62%; overflow: auto; padding: .7rem .8rem calc(.9rem + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #18181a; animation: ssUp .2s ease-out; }
.ss-v__sheet[hidden] { display: none; }
@keyframes ssUp { from { transform: translateY(40%); opacity: 0; } }
.ss-sh__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; } .ss-sh__h b { font-size: 16px; }
.ss-sh__row { display: flex; align-items: center; gap: .6rem; padding: .45rem .2rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .08); }
.ss-sh__row .js-av, .ss-sh__row img { width: 36px !important; height: 36px !important; border-radius: 50%; }
.ss-sh__row span { flex: 1; display: grid; } .ss-sh__row small { font-size: 12px; opacity: .7; }
.ss-sh__r .js-i { width: 20px; height: 20px; }
.ss-sh__e { margin: .6rem 0; font-size: 13.5px; opacity: .8; }
.ss-v__floats { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.ss-float { position: absolute; width: 28px; height: 28px; color: #ffb23f; animation: ssFloat 1.9s cubic-bezier(.2, .7, .3, 1) forwards; }
.ss-float .js-i { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .5)); }
@keyframes ssFloat { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translate(0, -30px) scale(1.2); } 100% { transform: translate(var(--dx), -360px) scale(.9) rotate(18deg); opacity: 0; } }
.ss-float--haul { color: #ff6b4a; } .ss-float--safe { color: #2dd4bf; } .ss-float--ha { color: #facc15; } .ss-float--pray { color: #fb7185; } .ss-float--sad { color: #93c5fd; }
.ss-v__side { display: none; }
@media (min-width: 700px) {
  .ss-v__side { display: grid; place-items: center; position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
  .ss-v__side--l { left: calc(50% - min(94dvh, 900px) * 9 / 32 - 66px); } .ss-v__side--r { right: calc(50% - min(94dvh, 900px) * 9 / 32 - 66px); }
}

/* ---------- story maker ---------- */
.ss-c__top { position: absolute; z-index: 6; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 10px; display: flex; align-items: center; gap: .55rem; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.ss-c__top b { flex: 1; font-size: 15px; font-weight: 900; }
.ss-c__life { display: inline-flex; align-items: center; gap: .25rem; height: 28px; padding: 0 .6rem; border-radius: 999px; background: rgb(0 0 0 / .4); font-size: 12px; font-weight: 800; }
.ss-c__life .js-i { width: 14px; height: 14px; }
.ss-c__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.ss-c__stage--pick { background: radial-gradient(circle at 50% 0%, #3a2414, #111 60%); display: grid; place-items: center; }
.ss-c__pick { width: 100%; padding: 4.2rem 1.1rem 1rem; display: grid; gap: .65rem; }
.ss-c__q { margin: 0 0 .3rem; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; text-align: center; }
.ss-c__tile { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; text-align: left; padding: .85rem 1rem; border-radius: 18px; border: 0; color: #fff; font: inherit; cursor: pointer; transition: transform .15s; }
.ss-c__tile:active { transform: scale(.98); }
.ss-c__tile .js-i { grid-row: 1 / 3; width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: rgb(255 255 255 / .2); }
.ss-c__tile b { font-size: 17px; font-weight: 900; } .ss-c__tile small { font-size: 12.5px; opacity: .9; }
.ss-c__tile--cam { background: linear-gradient(135deg, #0f766e, #2dd4bf); } .ss-c__tile--vid { background: linear-gradient(135deg, #9f1239, #e5262b); } .ss-c__tile--cb { background: linear-gradient(135deg, #1d1b18, #4a3a1c); color: #ffb23f; border: 1px solid #5b4a2a; }
.ss-c__fine { margin: .3rem 0 0; font-size: 12px; line-height: 1.4; opacity: .75; text-align: center; }
.ss-c__tools { position: absolute; z-index: 6; right: 8px; top: calc(max(8px, env(safe-area-inset-top)) + 46px); display: grid; gap: .45rem; }
.ss-c__tools[hidden], .ss-c__tools [hidden] { display: none !important; }
.ss-c__tools button { width: 52px; display: grid; justify-items: center; gap: 1px; padding: .35rem 0; border: 0; border-radius: 14px; background: rgb(0 0 0 / .42); color: #fff; font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; }
.ss-c__tools .js-i { width: 22px; height: 22px; }
.ss-c__panel { position: absolute; z-index: 7; left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); padding: .7rem; border-radius: 16px; background: rgb(18 18 20 / .94); animation: ssUp .18s ease-out; }
.ss-c__panel[hidden] { display: none; }
.ss-c__lbl { display: grid; gap: .35rem; font-size: 13px; font-weight: 800; } .ss-c__lbl small { font-weight: 600; opacity: .7; }
.ss-c__lbl input { height: 44px; padding: 0 .8rem; border-radius: 12px; border: 1px solid rgb(255 255 255 / .25); background: #000; color: #fff; font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
.ss-c__stks { display: flex; flex-wrap: wrap; gap: .4rem; }
.ss-c__sk { position: static; transform: none !important; height: 36px; padding: 0 .7rem; border-radius: 10px; font-family: var(--font-display); font-weight: 900; font-size: 13.5px; cursor: pointer; box-shadow: none; border: 2px solid transparent; background: rgb(255 255 255 / .1); color: #fff; }
.ss-c__sk[aria-checked="true"] { outline: 3px solid #fff; outline-offset: 2px; }
.ss-c__bgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.ss-c__bgb { position: relative; height: 62px; border-radius: 12px; border: 0; overflow: hidden; cursor: pointer; display: grid; align-items: end; padding: .3rem; }
.ss-c__bgb span { position: relative; z-index: 1; font-size: 10.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; text-align: left; }
.ss-c__bgb[aria-checked="true"] { outline: 3px solid #fff; outline-offset: 2px; }
.ss-c__err { position: absolute; z-index: 7; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); margin: 0; font-size: 13.5px; font-weight: 700; color: #fecaca; text-align: center; text-shadow: 0 1px 3px #000; pointer-events: none; }
.ss-c__err:empty { display: none; }
.ss-c__foot { flex: none; padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); background: #0c0c0d; }
.ss-c__foot:empty { display: none; }
.ss-c__go { width: 100%; display: flex; align-items: center; justify-content: center; gap: .55rem; height: 52px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #ff6b1a, #e5262b); color: #fff; font: inherit; font-weight: 900; font-size: 16px; cursor: pointer; }
.ss-c__go:disabled { opacity: .45; cursor: default; }
.ss-c__go .js-av, .ss-c__go img { width: 28px !important; height: 28px !important; border-radius: 50%; border: 2px solid #fff; }
.ss-c__go .js-i { width: 18px; height: 18px; }
.ss-c__ptt { position: absolute; z-index: 5; left: 0; right: 0; bottom: 8%; display: grid; justify-items: center; gap: .55rem; padding: 0 1rem; }
.ss-c__txh { width: 100%; height: 0; } .ss-c__ptt .cb-tx { width: 100%; margin: 0; }
.ss-c__key { touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none; width: 132px; height: 132px; border-radius: 50%; border: 0; display: grid; place-items: center; align-content: center; gap: 2px; background: radial-gradient(circle at 50% 35%, #ff5a5f, #e5262b 55%, #a3151a); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 16px 40px -10px rgb(229 38 43 / .8), inset 0 2px 0 rgb(255 255 255 / .25); }
.ss-c__key > .js-i { width: 40px; height: 40px; } .ss-c__key b { font-size: 15px; } .ss-c__key small { font-size: 11px; opacity: .85; }
.ss-c__key.is-tx { transform: scale(1.06); box-shadow: 0 0 0 12px rgb(229 38 43 / .25), 0 0 40px rgb(229 38 43 / .7); }
.ss-c__key .cb-key__lock { display: none; }
.ss-c__handle { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .8rem; border-radius: 999px; border: 0; background: rgb(0 0 0 / .5); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.ss-c__handle .js-i { width: 18px; height: 18px; color: #ffb23f; } .ss-c__handle b { color: #ffb23f; }
.ss-c__hear { position: absolute; z-index: 5; left: 50%; bottom: 10%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .45rem; height: 46px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: #ffb23f; color: #141414; font: inherit; font-weight: 900; font-size: 15px; cursor: pointer; white-space: nowrap; }
.ss-c__hear .js-i { width: 18px; height: 18px; }
.is-tx .ss-c__handle { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ss-road::after, .ss-bg5::before, .ss-cb .ss-cb__wave i, .ss-cb__mq, .ss-cb__ant, .ss-stk.is-drag, .ss-r.is-new .ss-r__ring, .ss-v__box { animation: none !important; } }
/* maker: keep the radio clear of the tool rail, and the text clear of the talk button */
.ss-c .ss-cb { left: 5%; right: 74px; }
.ss-c__stage:has(.ss-c__ptt) .ss-tx { display: none; }
.ss-c__hear { bottom: 3.5%; }
.ss-c .ss-v__stage--cb .ss-tx { bottom: 15%; }