.media-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-base);pointer-events:none}.media-overlay--show{opacity:1;pointer-events:auto}.media-overlay__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.95)}.media-overlay__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);width:100%;max-width:480px;padding:var(--space-xl);z-index:1}.media-overlay__preview{width:100%;max-width:400px;aspect-ratio:4/3;background-color:var(--color-surface);border-radius:var(--radius-lg);object-fit:cover;box-shadow:var(--shadow-lg)}.media-overlay__audio-indicator{position:relative;display:flex;align-items:center;justify-content:center;width:200px;height:200px}.media-overlay__audio-icon{position:relative;z-index:1;color:var(--color-primary)}.media-overlay__pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background-color:var(--color-primary);border-radius:var(--radius-full);opacity:.3;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.media-overlay__controls{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.media-overlay__timer{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background-color:rgba(0,0,0,.5);border-radius:var(--radius-full);backdrop-filter:blur(10px)}.media-overlay__recording-dot{width:12px;height:12px;background-color:var(--color-error);border-radius:var(--radius-full);animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}.media-overlay__time{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text-inverse);font-variant-numeric:tabular-nums;min-width:4ch}.media-overlay__stop-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);background-color:var(--color-error);color:var(--color-text-inverse);border-radius:var(--radius-full);font-size:var(--font-size-lg);font-weight:600;box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.media-overlay__stop-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.media-overlay__stop-btn:active{transform:scale(.95)}.media-overlay__stop-btn svg{width:24px;height:24px}.media-overlay--warning .media-overlay__timer{background-color:var(--color-warning);animation:shake .5s ease-in-out}.media-overlay--warning .media-overlay__recording-dot{background-color:var(--color-text-inverse)}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.media-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--space-sm);margin-top:var(--space-md)}.media-preview-item{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background-color:var(--color-surface);border:1px solid var(--color-border)}.media-preview-item img{width:100%;height:100%;object-fit:cover}.media-preview-item__remove{position:absolute;top:var(--space-xs);right:var(--space-xs);width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.7);color:var(--color-text-inverse);border-radius:var(--radius-full);opacity:0;transition:opacity var(--transition-fast)}.media-preview-item:hover .media-preview-item__remove{opacity:1}.media-preview-item__remove:hover{background-color:var(--color-error)}.media-attachment{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-top:var(--space-sm)}.media-attachment__icon{width:20px;height:20px;color:var(--color-primary)}.media-attachment__info{flex:1;display:flex;flex-direction:column;gap:var(--space-xs)}.media-attachment__label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.media-attachment__meta{font-size:var(--font-size-xs);color:var(--color-text-muted)}.media-attachment__remove{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--color-text-muted);transition:color var(--transition-fast)}.media-attachment__remove:hover{color:var(--color-error)}@media (max-width:360px){.media-overlay__content{padding:var(--space-md);gap:var(--space-lg)}.media-overlay__preview{max-width:100%}.media-overlay__audio-indicator{width:150px;height:150px}.media-overlay__audio-icon{width:40px;height:40px}.media-overlay__pulse{width:60px;height:60px}.media-overlay__stop-btn{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-base)}}@media (prefers-reduced-motion:reduce){.media-overlay__pulse,.media-overlay__recording-dot{animation:none}.media-overlay--warning .media-overlay__timer{animation:none}}