/**
 * Cure Space - Room Base Styles
 * Modern, Minimal Design
 *
 * @package Cure_Space
 */

/* Variables - Clean Dark Theme */
:root {
    --cure-space-bg: #0d0d12;
    --cure-space-bg-secondary: #13131a;
    --cure-space-bg-tertiary: #1a1a24;
    --cure-space-accent: #252532;
    --cure-space-primary: #22c55e;
    --cure-space-primary-hover: #16a34a;
    --cure-space-danger: #ef4444;
    --cure-space-danger-hover: #dc2626;
    --cure-space-text: #f8fafc;
    --cure-space-text-secondary: #94a3b8;
    --cure-space-text-muted: #64748b;
    --cure-space-border: rgba(255, 255, 255, 0.08);
    --cure-space-border-light: rgba(255, 255, 255, 0.12);
    --cure-space-success: #22c55e;
    --cure-space-warning: #f59e0b;
    --cure-space-error: #ef4444;
    --cure-space-radius: 16px;
    --cure-space-radius-md: 12px;
    --cure-space-radius-sm: 8px;
    --cure-space-radius-xs: 6px;
    --cure-space-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --cure-space-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --cure-space-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --cure-space-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --cure-space-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset for widget */
.cure-space-video-room-widget * {
    box-sizing: border-box;
}

/* Room Wrapper - Full viewport layout like Zoom/Meet */
.cure-space-room-wrapper {
    display: grid;
    grid-template-columns: 1fr 0; /* Default: chat hidden */
    grid-template-rows: 1fr auto;
    gap: 0;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    max-height: 100vh;
    max-height: 100dvh;
    background: var(--cure-space-bg);
    color: var(--cure-space-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    letter-spacing: -0.01em;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; /* For local preview positioning */
}

/* When chat is open, show sidebar column */
.cure-space-room-wrapper.cure-space-chat-open {
    grid-template-columns: 1fr 340px;
}

/* Fullscreen mode */
.cure-space-room-wrapper.cure-space-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
}

.cure-space-room-wrapper:fullscreen,
.cure-space-room-wrapper:-webkit-full-screen,
.cure-space-room-wrapper:-moz-full-screen,
.cure-space-room-wrapper:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

/* Video Area - Fill available space */
.cure-space-video-area {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    overflow: hidden;
    background: var(--cure-space-bg);
    padding: 0; /* Remove padding - let grid container handle it */
    min-height: 400px; /* Ensure minimum height */
    /* Ensure local preview stays within this area */
    isolation: isolate;
}

/* Sidebar */
.cure-space-sidebar {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    background: var(--cure-space-bg-secondary);
    border-left: 1px solid var(--cure-space-border);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 340px;
    min-width: 340px;
    overflow: hidden;
    transform: translateX(0);
    opacity: 1;
}

/* Hidden sidebar state - slides out */
.cure-space-sidebar.cure-space-sidebar-hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* Chat Panel */
.cure-space-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cure-space-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cure-space-border);
}

.cure-space-chat-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Chat status indicator - green dot */
.cure-space-chat-status {
    width: 8px;
    height: 8px;
    background: var(--cure-space-success);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cure-space-success);
    margin-left: 8px;
}

/* Removed duplicate h3::after green dot - using .cure-space-chat-status span instead */

/* Chat close button in sidebar header */
.cure-space-chat-close {
    background: none;
    border: none;
    color: var(--cure-space-text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--cure-space-radius-xs);
    transition: var(--cure-space-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.cure-space-chat-close:hover {
    background: var(--cure-space-accent);
    color: var(--cure-space-text);
}

/* Deprecated - kept for backwards compatibility */
.cure-space-chat-toggle {
    background: none;
    border: none;
    color: var(--cure-space-text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--cure-space-radius-xs);
    transition: var(--cure-space-transition);
    display: none; /* Hide old toggle button */
}

.cure-space-chat-toggle:hover {
    background: var(--cure-space-accent);
    color: var(--cure-space-text);
}

.cure-space-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cure-space-chat-message {
    max-width: 85%;
    padding: 12px 16px;
    background: var(--cure-space-accent);
    border-radius: var(--cure-space-radius-md);
    animation: messageIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cure-space-chat-message.own {
    margin-left: auto;
    background: var(--cure-space-primary);
    color: white;
}

.cure-space-chat-message.system {
    max-width: 100%;
    text-align: center;
    background: transparent;
    color: var(--cure-space-text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 8px;
}

.cure-space-chat-message .sender {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cure-space-primary);
    margin-bottom: 4px;
}

.cure-space-chat-message.own .sender {
    color: rgba(255, 255, 255, 0.85);
}

.cure-space-chat-message .content {
    display: block;
    word-break: break-word;
    line-height: 1.5;
    font-size: 14px;
}

.cure-space-chat-message .time {
    display: block;
    font-size: 10px;
    color: var(--cure-space-text-muted);
    margin-top: 6px;
    text-align: right;
    opacity: 0.7;
}

.cure-space-chat-message.own .time {
    color: rgba(255, 255, 255, 0.6);
}

/* Message sending state - optimistic UI */
.cure-space-chat-message.sending {
    opacity: 0.7;
}

.cure-space-chat-message.sending .sending-indicator {
    font-style: italic;
}

.cure-space-chat-message.sending .sending-indicator::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: cure-space-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes cure-space-spin {
    to { transform: rotate(360deg); }
}

/* Message failed state */
.cure-space-chat-message.failed {
    opacity: 0.8;
    background: var(--cure-space-danger) !important;
}

.cure-space-chat-message.failed .time {
    color: rgba(255, 255, 255, 0.8);
}

.cure-space-chat-input {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--cure-space-border);
    background: var(--cure-space-bg-tertiary);
}

.cure-space-chat-input input {
    flex: 1;
    padding: 14px 18px;
    background: var(--cure-space-accent);
    border: 1px solid var(--cure-space-border);
    border-radius: var(--cure-space-radius-sm);
    color: var(--cure-space-text);
    font-size: 14px;
    outline: none;
    transition: var(--cure-space-transition);
}

.cure-space-chat-input input:focus {
    border-color: var(--cure-space-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.cure-space-chat-input input::placeholder {
    color: var(--cure-space-text-muted);
}

.cure-space-chat-input button {
    padding: 14px 24px;
    background: var(--cure-space-primary);
    border: none;
    border-radius: var(--cure-space-radius-sm);
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--cure-space-transition);
}

.cure-space-chat-input button:hover {
    background: var(--cure-space-primary-hover);
}

.cure-space-chat-input button:active {
    transform: scale(0.98);
}

/* Chat input disabled/sending states */
.cure-space-chat-input input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cure-space-chat-input button:disabled,
.cure-space-chat-input button.sending {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--cure-space-text-muted);
}

.cure-space-chat-input button.sending {
    min-width: 80px;
}

/* Controls Bar */
.cure-space-controls {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--cure-space-bg-secondary);
    border-top: 1px solid var(--cure-space-border);
    min-height: 80px; /* Ensure controls don't collapse */
    z-index: 50; /* Above the video area */
}

.cure-space-controls-left,
.cure-space-controls-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cure-space-controls-center {
    flex: 1;
    text-align: center;
}

/* Control Buttons */
.cure-space-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--cure-space-accent);
    border: 1px solid var(--cure-space-border);
    border-radius: var(--cure-space-radius-md);
    color: var(--cure-space-text);
    cursor: pointer;
    transition: var(--cure-space-transition);
}

.cure-space-control-btn:hover {
    background: var(--cure-space-bg-tertiary);
    border-color: var(--cure-space-border-light);
    transform: translateY(-2px);
}

.cure-space-control-btn:active {
    transform: translateY(0);
}

.cure-space-control-btn.active {
    background: var(--cure-space-danger);
    border-color: var(--cure-space-danger);
    color: white;
}

.cure-space-control-btn.active:hover {
    background: var(--cure-space-danger-hover);
    border-color: var(--cure-space-danger-hover);
}

/* Chat toggle button - different active color (not danger) */
#cure-space-chat-toggle {
    position: relative;
}

#cure-space-chat-toggle.active {
    background: var(--cure-space-primary);
    border-color: var(--cure-space-primary);
}

#cure-space-chat-toggle.active:hover {
    background: var(--cure-space-primary-hover);
    border-color: var(--cure-space-primary-hover);
}

/* Fullscreen button - uses primary color when active */
#cure-space-fullscreen.active {
    background: var(--cure-space-primary);
    border-color: var(--cure-space-primary);
}

#cure-space-fullscreen.active:hover {
    background: var(--cure-space-primary-hover);
    border-color: var(--cure-space-primary-hover);
}

/* Chat unread badge */
.cure-space-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--cure-space-danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cure-space-badge-pulse 2s ease-in-out infinite;
}

@keyframes cure-space-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Leave Button - Override control-btn circular style */
.cure-space-control-btn.cure-space-leave-btn,
.cure-space-leave-btn {
    width: auto !important;
    padding: 0 28px !important;
    height: 48px !important;
    border-radius: 10px !important;
    background: var(--cure-space-danger) !important;
    border: none !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.cure-space-control-btn.cure-space-leave-btn:hover,
.cure-space-leave-btn:hover {
    background: var(--cure-space-danger-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

/* Status */
.cure-space-status {
    font-size: 14px;
    font-weight: 500;
    color: var(--cure-space-text-secondary);
}

.cure-space-status.connected {
    color: var(--cure-space-success);
}

.cure-space-status.error {
    color: var(--cure-space-error);
}

/* Icons (SVG) */
.cure-space-icon {
    display: block;
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cure-space-icon-mic {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
}

.cure-space-icon-mic-off {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
}

.cure-space-icon-camera {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}

.cure-space-icon-camera-off {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v9.34m-7.72-2.06a4 4 0 1 1-5.56-5.56'/%3E%3C/svg%3E");
}

.cure-space-icon-screen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
}

.cure-space-icon-chat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.cure-space-icon-fullscreen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}

.cure-space-icon-fullscreen-exit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' y1='10' x2='21' y2='3'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}

.cure-space-icon-pin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Participant Tile - Fill grid cell */
.cure-space-participant {
    position: relative;
    background: var(--cure-space-bg-tertiary);
    border-radius: var(--cure-space-radius);
    overflow: hidden;
    transition: var(--cure-space-transition);
    box-shadow: var(--cure-space-shadow-sm);
    /* No fixed aspect-ratio - let it fill the grid cell */
    width: 100%;
    height: 100%;
    /* Create explicit stacking context so z-index works correctly */
    isolation: isolate;
}

.cure-space-participant:hover {
    box-shadow: var(--cure-space-shadow);
}

.cure-space-participant-video {
    width: 100%;
    height: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--cure-space-bg-tertiary) 0%, var(--cure-space-bg) 100%);
    position: relative;
    overflow: hidden;
    /* Keep video layer below info overlay */
    z-index: 1;
}

.cure-space-participant-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Player wrapper - container for OvenPlayer */
.cure-space-player-wrapper,
.cure-space-participant-video > div[id^="ovenplayer"] {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important; /* Low z-index - info overlay is at z-index 100 */
    display: block !important;
}

/* OvenPlayer structure - override the default ratio-based sizing */
.cure-space-participant-video .ovenplayer {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.cure-space-participant-video .op-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Override the ratio div which normally uses padding-bottom for aspect ratio */
.cure-space-participant-video .op-ratio {
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.cure-space-participant-video .op-video-element-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Also target the wrapper by ID pattern */
.cure-space-participant-video div[id^="ovenplayer"] {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.cure-space-participant-video div[id^="ovenplayer"] > div {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Video element - force visibility and sizing everywhere */
.cure-space-participant-video video,
.cure-space-participant-video .op-video-element-wrapper video,
.cure-space-participant-video .ovenplayer video {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important; /* Lower z-index so info overlay shows above */
    background: transparent !important;
}

/* Hide OvenPlayer UI controls (but keep video structure intact) */
.cure-space-participant-video .op-ui,
.cure-space-participant-video .op-controls,
.cure-space-participant-video .op-message-box,
.cure-space-participant-video .op-controls-container,
.cure-space-participant-video .op-big-play-button,
.cure-space-participant-video .op-play-button,
.cure-space-participant-video .op-setting-panel,
.cure-space-participant-video .op-poster {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep OvenPlayer structure elements visible but override their sizing */
.cure-space-participant-video .op-wrapper,
.cure-space-participant-video .op-ratio,
.cure-space-participant-video .op-video-element-wrapper,
.cure-space-participant-video .ovenplayer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* No Video Placeholder */
.cure-space-no-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cure-space-bg-tertiary);
    color: var(--cure-space-text-muted);
}

.cure-space-no-video svg {
    width: 48px;
    height: 48px;
    opacity: 0.4;
    stroke: currentColor;
}

/* Participant Info Overlay - discreet name badge in UPPER left corner */
.cure-space-participant-info {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    z-index: 9999 !important; /* Very high z-index to ensure above OvenPlayer */
    pointer-events: none;
    max-width: calc(100% - 24px);
    opacity: 1 !important;
    visibility: visible !important;
    transition: background 0.2s ease;
}

/* Show name more prominently on hover */
.cure-space-participant:hover .cure-space-participant-info {
    background: rgba(0, 0, 0, 0.8);
}

/* Ensure info overlay shows on ALL participant videos (grid, speaker, gallery) */
.cure-space-grid-item .cure-space-participant-info,
.cure-space-speaker .cure-space-participant-info,
.cure-space-gallery-item .cure-space-participant-info,
.cure-space-participant .cure-space-participant-info {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    top: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    right: auto !important;
}

.cure-space-participant-name {
    font-size: 12px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    letter-spacing: 0.01em;
}

.cure-space-audio-indicator {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--cure-space-transition);
}

.cure-space-audio-indicator.speaking {
    background: var(--cure-space-success);
    box-shadow: 0 0 8px var(--cure-space-success);
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.9; }
}

.cure-space-participant-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: var(--cure-space-transition);
    z-index: 100; /* Same level as info overlay */
}

.cure-space-participant:hover .cure-space-participant-actions {
    opacity: 1;
}

.cure-space-pin-btn {
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: var(--cure-space-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--cure-space-transition);
}

.cure-space-pin-btn:hover {
    background: var(--cure-space-primary);
}

.cure-space-pin-btn .cure-space-icon {
    width: 16px;
    height: 16px;
}

/* Local Preview - Picture-in-Picture style like Zoom/Meet */
/* Positioned in the wrapper, above the controls bar */
.cure-space-local-preview {
    position: absolute;
    bottom: 100px; /* Above the controls bar (~80px + padding) */
    right: 20px;
    width: 200px;
    max-width: 25vw;
    border-radius: var(--cure-space-radius-md);
    overflow: hidden;
    box-shadow: var(--cure-space-shadow-lg);
    z-index: 100; /* Above everything in the video area */
    border: 2px solid rgba(255, 255, 255, 0.2);
    aspect-ratio: 16 / 9;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s ease;
    background: var(--cure-space-bg-tertiary);
}

/* When chat is open, move local preview to the left edge of video area */
.cure-space-room-wrapper.cure-space-chat-open .cure-space-local-preview {
    right: calc(340px + 20px); /* sidebar width + margin */
}

.cure-space-local-preview:hover {
    transform: scale(1.02);
    border-color: var(--cure-space-primary);
}

.cure-space-local-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* Mirror the local video */
}

.cure-space-local-preview .cure-space-participant-info {
    top: 8px !important;
    left: 8px !important;
    bottom: auto !important;
    padding: 4px 8px;
    border-radius: 4px;
}

.cure-space-local-preview .cure-space-participant-name {
    font-size: 10px;
}

/* Loading Spinner */
.cure-space-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cure-space-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cure-space-border);
    border-top-color: var(--cure-space-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.cure-space-loading-text {
    font-size: 14px;
    color: var(--cure-space-text-muted);
}

/* Scrollbar */
.cure-space-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.cure-space-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.cure-space-chat-messages::-webkit-scrollbar-thumb {
    background: var(--cure-space-accent);
    border-radius: 3px;
}

.cure-space-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--cure-space-border-light);
}

/* Leaving overlay - instant visual feedback */
.cure-space-leaving-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 13, 18, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: cure-space-fade-in 0.15s ease-out;
}

@keyframes cure-space-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cure-space-leaving-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--cure-space-text);
    font-size: 16px;
    font-weight: 500;
}

.cure-space-leaving-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cure-space-accent);
    border-top-color: var(--cure-space-primary);
    border-radius: 50%;
    animation: cure-space-spin 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 1200px) {
    .cure-space-room-wrapper.cure-space-chat-open {
        grid-template-columns: 1fr 300px;
    }
    
    .cure-space-sidebar {
        width: 300px;
        min-width: 300px;
    }
    
    .cure-space-local-preview {
        width: 180px;
        bottom: 100px;
    }
    
    .cure-space-room-wrapper.cure-space-chat-open .cure-space-local-preview {
        right: calc(300px + 20px); /* smaller sidebar + margin */
    }
}

@media (max-width: 1024px) {
    /* On tablet/mobile, video takes full width */
    .cure-space-room-wrapper,
    .cure-space-room-wrapper.cure-space-chat-open {
        grid-template-columns: 1fr !important;
    }
    
    /* On mobile/tablet, sidebar slides in from right as overlay */
    .cure-space-sidebar {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 85vw;
        z-index: 1000;
        border-left: none;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    .cure-space-local-preview {
        width: 150px;
        bottom: 100px;
        right: 16px;
    }
    
    /* On mobile, local preview doesn't need to move for chat (it's an overlay) */
    .cure-space-room-wrapper.cure-space-chat-open .cure-space-local-preview {
        right: 16px;
    }
}

@media (max-width: 768px) {
    .cure-space-video-area {
        padding: 0;
        min-height: 300px;
    }
    
    .cure-space-controls {
        padding: 12px 16px;
    }
    
    .cure-space-control-btn {
        width: 44px;
        height: 44px;
    }
    
    /* Hide chat toggle button on mobile - chat is problematic on small screens */
    #cure-space-chat-toggle {
        display: none !important;
    }
    
    /* Hide fullscreen button on mobile - Fullscreen API not supported on iOS */
    #cure-space-fullscreen {
        display: none !important;
    }
    
    .cure-space-control-btn.cure-space-leave-btn,
    .cure-space-leave-btn {
        padding: 0 16px !important;
        height: 40px !important;
        font-size: 12px;
        border-radius: 8px !important;
    }
    
    .cure-space-local-preview {
        width: 120px;
        max-width: 30vw;
        bottom: 96px;
        right: 12px;
    }
    
    .cure-space-room-wrapper.cure-space-chat-open .cure-space-local-preview {
        right: 12px;
    }
    
    .cure-space-local-preview .cure-space-participant-info {
        padding: 4px 6px;
    }
    
    .cure-space-local-preview .cure-space-participant-name {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .cure-space-controls {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .cure-space-control-btn {
        width: 40px;
        height: 40px;
    }
    
    .cure-space-local-preview {
        width: 100px;
        max-width: 25vw;
        bottom: 90px;
        right: 10px;
    }
    
    .cure-space-room-wrapper.cure-space-chat-open .cure-space-local-preview {
        right: 10px;
    }
}

/* Animation for joining */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cure-space-room-wrapper {
    animation: fadeInUp 0.4s ease-out;
}

/* =====================================================
   HOST CONTROLS & MODERATION
   ===================================================== */

/* Host badge on video window */
.cure-space-host-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--cure-space-primary), var(--cure-space-primary-hover));
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
}

/* Host participant styling */
.cure-space-participant-host {
    box-shadow: 0 0 0 2px var(--cure-space-primary);
}

/* Host control buttons in control bar */
.cure-space-host-control {
    background: var(--cure-space-accent);
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cure-space-host-control.active {
    background: var(--cure-space-primary);
    color: white;
}

/* Loading state for buttons */
.cure-space-host-control.loading {
    opacity: 0.7;
    pointer-events: none;
}

.cure-space-host-control.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: cure-space-spin 0.6s linear infinite;
}

/* ===========================================
   VOICE MODE BUTTON - Simple Blue/Red colors
   Blue = ON (enabled), Red = OFF (disabled)
   =========================================== */
#cure-space-voice-mode {
    background: #dc2626 !important; /* RED when OFF (default) */
    color: white !important;
    border: none !important;
}

#cure-space-voice-mode:hover:not(.loading) {
    background: #b91c1c !important; /* Darker red on hover */
}

#cure-space-voice-mode.active {
    background: #2563eb !important; /* BLUE when ON */
    color: white !important;
}

#cure-space-voice-mode.active:hover:not(.loading) {
    background: #1d4ed8 !important; /* Darker blue on hover */
}

/* Mute All icon - mic with slash (default - participants can talk) */
.cure-space-icon-mute-all {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Mute All icon - active state (all muted - with slash) */
#cure-space-mute-all.active .cure-space-icon-mute-all {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Voice Mode icon - mic with sound waves (OFF state - with slash) */
.cure-space-icon-voice-mode {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Voice Mode icon - active state (ON - no slash, with sound waves) */
#cure-space-voice-mode.active .cure-space-icon-voice-mode {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3Cpath d='M1 12h2'/%3E%3Cpath d='M21 12h2'/%3E%3C/svg%3E");
}

/* Kick/Expel icon - user X */
.cure-space-icon-kick {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='18' y1='8' x2='23' y2='13'/%3E%3Cline x1='23' y1='8' x2='18' y2='13'/%3E%3C/svg%3E");
}

/* Host participant controls (on video elements) - Always visible */
.cure-space-host-participant-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 1;
    z-index: 20;
}

.cure-space-host-mute-btn,
.cure-space-host-kick-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--cure-space-transition);
}

.cure-space-host-mute-btn .cure-space-icon,
.cure-space-host-kick-btn .cure-space-icon {
    width: 16px;
    height: 16px;
}

/* Kick/Expel button - more prominent red styling */
.cure-space-host-kick-btn {
    background: rgba(220, 38, 38, 0.85);
}

.cure-space-host-kick-btn:hover:not(.loading) {
    background: #dc2626;
    transform: scale(1.1);
}

.cure-space-host-mute-btn:hover:not(.loading) {
    background: var(--cure-space-warning);
}

.cure-space-host-mute-btn.active {
    background: var(--cure-space-warning);
}

.cure-space-host-mute-btn.loading,
.cure-space-host-kick-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.cure-space-host-kick-btn:hover:not(.loading) {
    background: var(--cure-space-danger);
}

/* Muted by host indicator */
.cure-space-muted-indicator {
    display: none;
    font-size: 10px;
    color: var(--cure-space-warning);
    margin-left: 6px;
}

.cure-space-muted-by-host .cure-space-muted-indicator {
    display: inline;
}

/* Mute button when muted by host */
.cure-space-muted-by-host #cure-space-mute,
#cure-space-mute.cure-space-muted-by-host {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--cure-space-danger) !important;
    pointer-events: none;
}

#cure-space-mute.cure-space-muted-by-host .cure-space-icon {
    color: white;
}

/* ===========================================
   MUTE ALL BUTTON - Simple Blue/Red colors
   Blue = all unmuted (click to mute), Red = all muted (click to unmute)
   =========================================== */
#cure-space-mute-all {
    background: #2563eb !important; /* BLUE when participants are unmuted (default) */
    color: white !important;
    border: none !important;
}

#cure-space-mute-all:hover:not(.loading) {
    background: #1d4ed8 !important; /* Darker blue on hover */
}

#cure-space-mute-all.active {
    background: #dc2626 !important; /* RED when all are muted */
    color: white !important;
}

#cure-space-mute-all.active:hover:not(.loading) {
    background: #b91c1c !important; /* Darker red on hover */
}

#cure-space-mute-all.loading {
    opacity: 0.7;
}

/* =====================================================
   VOICE-ACTIVATED MODE
   ===================================================== */

/* Voice mode wrapper styling */
.cure-space-wrapper-voice-mode .cure-space-video-area {
    background: var(--cure-space-bg);
}

/* Voice mode layout */
.cure-space-layout-voice .cure-space-grid-container {
    display: grid;
    gap: 8px;
    padding: 8px;
}

/* Host takes full width when alone in voice mode */
.cure-space-voice-host-only .cure-space-participant {
    grid-column: 1 / -1;
    max-height: 100%;
}

/* Host video in voice mode - special styling */
.cure-space-layout-voice .cure-space-voice-host {
    box-shadow: 0 0 0 3px var(--cure-space-primary);
}

/* Broadcasting indicator */
.cure-space-participant-broadcasting {
    position: relative;
}

.cure-space-participant-broadcasting::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid var(--cure-space-primary);
    border-radius: var(--cure-space-radius);
    animation: pulse-border 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes pulse-border {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Not broadcasting indicator */
.cure-space-not-broadcasting {
    position: relative;
}

.cure-space-not-broadcasting::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--cure-space-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cure-space-text-muted);
    font-size: 12px;
    pointer-events: none;
}

/* =====================================================
   NOTIFICATIONS
   ===================================================== */

.cure-space-notification {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cure-space-bg-secondary);
    color: var(--cure-space-text);
    padding: 12px 24px;
    border-radius: var(--cure-space-radius-md);
    box-shadow: var(--cure-space-shadow);
    font-size: 14px;
    z-index: 10001;
    animation: notification-slide-in 0.3s ease-out;
}

.cure-space-notification-hide {
    animation: notification-slide-out 0.3s ease-out forwards;
}

@keyframes notification-slide-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes notification-slide-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* =====================================================
   MOBILE ADJUSTMENTS FOR HOST CONTROLS
   ===================================================== */

@media (max-width: 768px) {
    /* Hide host-only controls on mobile */
    .cure-space-host-control {
        display: none !important;
    }
    
    /* Simplify host badge on mobile */
    .cure-space-host-badge {
        font-size: 8px;
        padding: 1px 6px;
    }
    
    /* Host participant controls on mobile */
    .cure-space-host-participant-controls {
        gap: 4px;
    }
    
    .cure-space-host-mute-btn,
    .cure-space-host-kick-btn {
        width: 28px;
        height: 28px;
    }
    
    .cure-space-host-mute-btn .cure-space-icon,
    .cure-space-host-kick-btn .cure-space-icon {
        width: 14px;
        height: 14px;
    }
    
    .cure-space-notification {
        max-width: 90%;
        font-size: 12px;
        padding: 10px 16px;
    }
}