.rac-widget { display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.rac-widget *, .rac-widget *::before, .rac-widget *::after { box-sizing: border-box; }
.rac-widget.is-ready { position: relative; min-height: 86px; width: 100%; margin: 18px 0 6px; overflow: visible; }
.rac-float-toggle, .rac-play-button, .rac-close { font-family: inherit; }
.rac-tooltip { position: absolute; right: 98px; bottom: 88px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; background: #111; color: #fff; border-radius: 999px; padding: 7px 11px; font-size: 12px; line-height: 1; font-weight: 700; white-space: nowrap; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.rac-tooltip::after { content: ""; position: absolute; right: 15px; bottom: -5px; width: 10px; height: 10px; background: #111; transform: rotate(45deg); }
.rac-arrow-hint { position: absolute; right: 62px; bottom: 22px; width: 96px; height: 72px; z-index: 2; pointer-events: none; opacity: .92; background-color: var(--rac-arrow-color, #111); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72' viewBox='0 0 96 72' fill='none'%3E%3Cpath d='M6 10c12 12 21 23 34 31 13 8 28 11 48 11' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M76 45c5 1 9 4 12 8' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M77 56c5-1 9-4 12-8' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72' viewBox='0 0 96 72' fill='none'%3E%3Cpath d='M6 10c12 12 21 23 34 31 13 8 28 11 48 11' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M76 45c5 1 9 4 12 8' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M77 56c5-1 9-4 12-8' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity 180ms ease, transform 180ms ease; }
.rac-widget.is-expanded .rac-arrow-hint, .rac-widget.is-playing .rac-arrow-hint, .rac-widget.is-expanded .rac-tooltip, .rac-widget.is-playing .rac-tooltip { opacity: 0; transform: translateX(8px) translateY(4px) scale(.96); }
.rac-float-toggle { width: 58px; height: 58px; border: 0; border-radius: 999px; background: var(--rac-wave-color, #0f4c81); color: #fff; box-shadow: 0 12px 34px rgba(15,76,129,.26); cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; bottom: 0; z-index: 3; }
.rac-wave { width: 28px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.rac-wave span { width: 3px; height: 15px; border-radius: 999px; background: currentColor; opacity: .96; }
.rac-wave span:nth-child(1) { height: 10px; } .rac-wave span:nth-child(2) { height: 20px; } .rac-wave span:nth-child(3) { height: 28px; } .rac-wave span:nth-child(4) { height: 16px; }
.rac-panel { width: min(330px, calc(100vw - 34px)); position: absolute; right: 0; bottom: 68px; z-index: 4; opacity: 0; pointer-events: none; transform: translateY(14px) scale(.98); transform-origin: bottom right; transition: transform 220ms ease, opacity 180ms ease; }
.rac-card { border: 1px solid rgba(15,76,129,.14); border-radius: 20px; background: #fff; color: #172033; box-shadow: 0 18px 50px rgba(15,76,129,.22); overflow: hidden; }
.rac-card-top { display: flex; gap: 12px; align-items: flex-start; padding: 15px 14px 11px; }
.rac-card-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 999px; background: var(--rac-wave-color, #0f4c81); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rac-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rac-title { font-size: 15px; line-height: 1.2; font-weight: 750; }
.rac-description { font-size: 13px; line-height: 1.32; color: #5b6474; }
.rac-close { width: 30px; height: 30px; min-width: 30px; border: 0; border-radius: 999px; background: #f1f5f9; color: #334155; cursor: pointer; font-size: 20px; line-height: 1; }
.rac-play-button { width: calc(100% - 28px); margin: 0 14px 14px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; background: var(--rac-wave-color, #0f4c81); color: var(--rac-play-icon-color, #fff); padding: 12px 16px; font-size: 14px; font-weight: 750; cursor: pointer; }
.rac-play-symbol { font-size: 14px; transform: translateY(1px); }
.rac-widget.is-expanded .rac-panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.rac-widget.is-playing .rac-wave span { animation: rac-wave 780ms ease-in-out infinite; }
.rac-widget.is-playing .rac-play-symbol::before { content: "■"; }
.rac-widget:not(.is-playing) .rac-play-symbol::before { content: "▶"; }
@keyframes rac-wave { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.1); } }
.rac-editor-preview { padding: 18px; border: 1px dashed #ccd0d4; border-radius: 10px; background: #f8fafc; }
.rac-editor-preview p { margin: 6px 0; }
.rac-editor-note { font-size: 12px; color: #646970; }
.rac-admin-warning { display:block; padding: 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; color:#7c2d12; font-size:13px; }
@media (max-width: 768px) { .rac-widget { display: block; } }