:root{--recordpanel-primary: 221 83% 53%;--recordpanel-primary-foreground: 0 0% 100%;--recordpanel-secondary: 210 40% 96%;--recordpanel-secondary-foreground: 222 47% 11%;--recordpanel-destructive: 0 84% 60%;--recordpanel-destructive-foreground: 0 0% 100%;--recordpanel-muted: 210 40% 96%;--recordpanel-muted-foreground: 215 16% 47%;--recordpanel-accent: 210 40% 96%;--recordpanel-accent-foreground: 222 47% 11%;--recordpanel-border: 214 32% 91%;--recordpanel-input: 214 32% 91%;--recordpanel-ring: 221 83% 53%;--recordpanel-background: 0 0% 100%;--recordpanel-foreground: 222 47% 11%;--recordpanel-card: 0 0% 100%;--recordpanel-card-foreground: 222 47% 11%}.recordpanel-overlay{position:fixed;bottom:24px;right:24px;z-index:10000;pointer-events:all;animation:slideInUp .3s ease-out;cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.recordpanel-overlay.dragging,.recordpanel-overlay.dragging *{cursor:grabbing!important}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.recordpanel-container{position:relative;display:flex;flex-direction:column;gap:8px;pointer-events:all}.recordpanel-camera-preview{position:absolute;bottom:100%;right:0;margin-bottom:8px;width:120px;height:120px;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 4px 16px #0000004d,0 0 0 2px hsl(var(--recordpanel-border)),0 0 0 4px hsl(var(--recordpanel-muted));transition:all .3s ease;cursor:move;z-index:1}.recordpanel-camera-preview:hover{box-shadow:0 6px 20px #0006,0 0 0 2px hsl(var(--recordpanel-border)),0 0 0 4px hsl(var(--recordpanel-muted));transform:scale(1.02)}.recordpanel-video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:scaleX(-1)}.recordpanel-recording-indicator{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center}.recordpanel-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 8px #ef4444cc}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.recordpanel-paused-indicator{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:4px;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:600;border:1px solid rgba(255,255,255,.1)}.recordpanel-paused-text{font-size:10px;font-weight:600}.recordpanel-icon{width:16px;height:16px;flex-shrink:0}.recordpanel-icon-small{width:10px;height:10px;flex-shrink:0}.recordpanel-controls{display:flex;gap:6px;background:hsl(var(--recordpanel-card));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:8px;border-radius:10px;box-shadow:0 2px 12px #00000026,0 0 0 1px hsl(var(--recordpanel-border));flex-wrap:wrap;justify-content:center;align-items:center;border:1px solid hsl(var(--recordpanel-border));cursor:move}.recordpanel-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:6px;font-size:14px;font-weight:500;transition:all .2s ease;cursor:pointer;border:none;outline:none;font-family:inherit}.recordpanel-button:focus-visible{outline:2px solid hsl(var(--recordpanel-ring));outline-offset:2px}.recordpanel-button:disabled{pointer-events:none;opacity:.5}.recordpanel-button-icon{width:32px;height:32px;padding:0}.recordpanel-button-stop{height:32px;padding:0 12px;font-size:14px}.recordpanel-button-primary{background:hsl(var(--recordpanel-primary));color:hsl(var(--recordpanel-primary-foreground))}.recordpanel-button-primary:hover{background:hsl(var(--recordpanel-primary) / .9)}.recordpanel-button-outline{background:transparent;color:hsl(var(--recordpanel-foreground));border:1px solid hsl(var(--recordpanel-border))}.recordpanel-button-outline:hover{background:hsl(var(--recordpanel-accent));color:hsl(var(--recordpanel-accent-foreground))}.recordpanel-button-ghost{background:transparent;color:hsl(var(--recordpanel-foreground))}.recordpanel-button-ghost:hover{background:hsl(var(--recordpanel-accent));color:hsl(var(--recordpanel-accent-foreground))}.recordpanel-button-pause{background:#ca8a04;color:#fff}.recordpanel-button-pause:hover{background:#a16207}.recordpanel-button-resume{background:#16a34a;color:#fff}.recordpanel-button-resume:hover{background:#15803d}.recordpanel-button-restart{background:transparent;color:#ea580c;border:1px solid #ea580c}.recordpanel-button-restart:hover{background:#fff7ed}.recordpanel-controls button{cursor:pointer}.recordpanel-duration{display:flex;align-items:center;justify-content:center;min-width:50px;padding:0 8px;font-family:Monaco,Menlo,Courier New,monospace;font-size:13px;font-weight:600;color:hsl(var(--recordpanel-foreground));background:hsl(var(--recordpanel-muted));border-radius:5px;height:32px}.recordpanel-audio-meter{display:flex;align-items:center;height:32px;padding:0 6px}.recordpanel-audio-bars{display:flex;align-items:flex-end;gap:2px;height:18px}.recordpanel-audio-bar-segment{width:3px;background:hsl(var(--recordpanel-primary));border-radius:1.5px;transition:all .1s ease}.recordpanel-audio-bar-segment:nth-child(1){height:30%}.recordpanel-audio-bar-segment:nth-child(2){height:50%}.recordpanel-audio-bar-segment:nth-child(3){height:70%}.recordpanel-audio-bar-segment:nth-child(4){height:85%}.recordpanel-audio-bar-segment:nth-child(5){height:100%}.recordpanel-audio-bar-segment.active{background:hsl(var(--recordpanel-primary));box-shadow:0 0 4px hsl(var(--recordpanel-primary) / .5)}.recordpanel-audio-indicator{position:absolute;bottom:0;left:0;right:0;height:3px;background:hsl(var(--recordpanel-primary) / .2);border-radius:0 0 50% 50%;overflow:hidden}.recordpanel-audio-bar{width:100%;background:linear-gradient(to right,hsl(var(--recordpanel-primary)),hsl(var(--recordpanel-primary) / .8));transition:height .1s ease;border-radius:0 0 50% 50%}.recordpanel-error{position:fixed;top:16px;right:16px;background:hsl(var(--recordpanel-destructive) / .1);border:1px solid hsl(var(--recordpanel-destructive) / .2);color:hsl(var(--recordpanel-destructive));padding:12px 16px;border-radius:8px;z-index:10001;max-width:384px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.recordpanel-error-content{display:flex;align-items:flex-start;gap:8px}.recordpanel-error-label{font-size:14px;font-weight:500}.recordpanel-error-message{font-size:14px}@media(max-width:640px){.recordpanel-overlay{bottom:16px;right:16px}.recordpanel-camera-preview{width:200px;height:200px}.recordpanel-controls{padding:10px;gap:6px}}