/* ux4 note bubbles/editor with ux16 text+voice and ux17 modal ownership. */
.fn-strip{display:flex;gap:18px;align-items:flex-start;overflow-x:auto;padding:47px 9px 10px;min-height:162px;scrollbar-width:none}
.fn-person{position:relative;flex:none;width:78px;text-align:center;color:#16132A}
.fn-person>button{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.fn-person small{font-size:11px;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-bubble{position:absolute;bottom:calc(100% - 8px);right:50%;transform:translateX(50%);max-width:100px;min-width:60px;border-radius:15px;padding:5px 8px;background:var(--fn-bg,#EFE7FF);color:var(--fn-fg,#2E1065);box-shadow:0 0 0 1px rgba(124,58,237,.18),0 3px 10px rgba(76,29,149,.14);font-size:10.5px;font-weight:700;line-height:1.3;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.fn-bubble:after{content:"";position:absolute;bottom:-4px;right:24px;width:8px;height:8px;border-radius:50%;background:var(--fn-bg,#EFE7FF)}
.fn-bubble span{max-width:86px;overflow:hidden;text-overflow:ellipsis}
.fn-bubble svg{flex:none;width:12px;height:12px}
.fn-bubble.with-gif{max-width:112px;padding:4px;white-space:normal;flex-direction:column;gap:3px}
.fn-pill-gif{display:block;width:60px;height:38px;object-fit:cover;border-radius:8px}
.fn-bubble.with-gif span{max-width:96px;white-space:nowrap}
.fn-strip-host{position:relative}
.fn-strip-host.xmact{display:block;height:auto;overflow:visible;padding:0}
.fn-loading{display:flex;gap:18px;align-items:flex-start}
.fn-loading i{display:block;width:68px;height:68px;border-radius:50%;background:#F0E8FA}
.fn-strip-status{font-size:12px;color:#6B6585;padding:0 12px}
.fn-strip-status:empty{display:none}
.fn-more{align-self:center;flex:none;padding:10px;border-radius:16px;background:#F3EEFF;color:#6D28D9;font-size:12px}
.fn-editor.new-panel{z-index:90;background:#fff;color:#16132A}
.fn-editor>.new-panel-head{border:0;background:#fff;min-height:68px}
.fn-editor .new-panel-head>b{font-size:15px;visibility:hidden}
.fn-editor .new-panel-head .round{width:44px;height:44px;background:#fff;box-shadow:0 2px 14px rgba(76,29,149,.16)}
.fn-editor>.new-panel-body{padding:0;display:flex;flex-direction:column;overflow:auto}
.fn-stage{flex:1;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px 12px}
.fn-bub{width:250px;max-width:100%;min-height:62px;border-radius:26px;padding:12px 18px;background:var(--fn-bg,#EFE7FF);color:var(--fn-fg,#2E1065);box-shadow:0 6px 20px rgba(76,29,149,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:600}
.fn-bub textarea{width:100%;min-height:22px;border:0;background:transparent;outline:0;resize:none;text-align:center;font:inherit;color:inherit;line-height:1.4;padding:0;direction:rtl}
.fn-bub textarea::placeholder{color:inherit;opacity:.55}
.fn-dots{position:relative;width:100%;height:20px;flex:none}
.fn-dots i{position:absolute;border-radius:50%;background:var(--fn-bg,#EFE7FF);box-shadow:0 3px 8px rgba(76,29,149,.12)}
.fn-dots i:first-child{width:15px;height:15px;right:calc(50% - 38px);top:-2px}
.fn-dots i+ i{width:9px;height:9px;right:calc(50% - 56px);top:12px}
.fn-av{position:relative;width:112px;height:112px;margin-top:-2px;flex:none}
.fn-av>.new-avatar{width:112px!important;height:112px!important}
.fn-pal{position:absolute;bottom:-2px;left:-6px;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(76,29,149,.28);display:grid;place-items:center;color:#7C3AED}
.fn-tools{display:flex;gap:12px;margin-top:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.fn-record{min-height:52px;border-radius:26px;padding:0 20px;display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#8B5CF6,#4C1D95);color:#fff;font-weight:700;font-size:14.5px;box-shadow:0 8px 20px rgba(91,33,182,.34)}
.fn-tool{height:48px;min-width:56px;border-radius:18px;background:#fff;box-shadow:0 0 0 1.5px #E7E0F5;display:grid;place-items:center;color:#7C3AED}
.fn-options{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.fn-options button{padding:8px 12px;border-radius:16px;background:#F3EEFF;color:#6D28D9;font-size:12px;font-weight:700}
.fn-options .fn-delete{color:#C62B48;background:#FFF0F4}
.fn-hint{font-size:12px;color:#6B6585;margin-top:12px;min-height:18px;text-align:center;line-height:1.6}
.fn-extra{display:block;width:100%;max-width:280px;margin:8px auto 0;border:0;background:#F6F2FF;border-radius:14px;padding:9px 12px;font:inherit;font-size:14.5px;color:#16132A;text-align:center;outline:none}
.fn-extra[hidden]{display:none}
.fn-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px))}
.fn-share{border-radius:24px;padding:12px 26px;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,#8B5CF6,#5B21B6)}
.fn-audience{font:inherit;font-size:14px;font-weight:700;border:0;background:#fff;color:#16132A;max-width:100%;padding:8px}
.fn-palette{display:flex;justify-content:center;gap:9px;margin-top:14px}
.fn-palette[hidden]{display:none}
.fn-palette button{width:30px;height:30px;border:2px solid #E7E0F5;border-radius:50%;background:var(--swatch)}
.fn-palette button[aria-pressed=true]{outline:2px solid #7C3AED;outline-offset:3px}
.fn-audio{width:100%;display:flex;align-items:center;gap:8px;direction:ltr}
.fn-audio .play{width:32px;height:32px;flex:none;background:#7C3AED;color:#fff;box-shadow:none}
.fn-audio .wave{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;height:26px;overflow:hidden}
.fn-audio .wave i{width:3px;max-width:3px;flex:1;border-radius:2px;background:currentColor}
.fn-audio .wave i.dim{opacity:.35}
.fn-audio .t{font-size:12px;color:inherit}
.fn-gif-preview{position:relative;width:min(220px,100%);overflow:hidden;border-radius:16px;background:#F1EEF7}
.fn-gif-preview img{display:block;width:100%;max-height:180px;object-fit:contain}
.fn-gif-preview button{display:block;width:100%;padding:7px;background:#FCEBF0;color:#A51D3D;font-size:12px;font-weight:700}
.fn-live{display:flex;gap:3px;height:28px;align-items:center;color:inherit}
.fn-live i{width:3px;height:5px;border-radius:3px;background:currentColor;transform-origin:center}
.fn-clock{font-variant-numeric:tabular-nums;direction:ltr;font-size:15px}
.fn-error{margin:12px 18px;padding:12px;border-radius:16px;background:#FFF1F5;color:#A22245;font-size:13px;line-height:1.6}
.fn-error button{display:block;color:#6D28D9;font-weight:700;padding:8px 0}
.fn-view .fn-bub p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;text-align:center}
.fn-view-gif{display:block;width:min(200px,100%);max-height:180px;object-fit:contain;border-radius:14px}
.fn-view .fn-name{font-size:16px;margin:16px 0 4px}
.fn-editor button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.fn-editor button:focus-visible,.fn-strip button:focus-visible,.fn-audience:focus-visible{outline:3px solid #A78BFA;outline-offset:3px}
@media(max-height:650px){.fn-stage{justify-content:flex-start;min-height:300px;padding-top:16px}.fn-av,.fn-av>.new-avatar{width:88px!important;height:88px!important}.fn-tools{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.fn-editor *,.fn-strip *{animation:none!important;scroll-behavior:auto!important}}