cinny/src/app/features/call/CallOverlay.css.ts

import { style } from '@vanilla-extract/css';
import { config, DefaultReset, color, toRem } from 'folds';

export const CallOverlayContainer = style([
  DefaultReset,
  {
    position: 'fixed',
    top: '60px',
    right: config.space.S400,
    zIndex: 9999,
    backgroundColor: color.Surface.Container,
    borderRadius: config.radii.R400,
    padding: config.space.S300,
    boxShadow: `0 4px 12px ${color.Other.Shadow}`,
    minWidth: '280px',
    maxWidth: '400px',
    transition: 'box-shadow 0.2s ease',
    userSelect: 'none',
    color: color.Surface.OnContainer,
  },
]);

export const CallOverlayDragging = style({
  boxShadow: `0 8px 24px ${color.Other.Shadow}`,
  opacity: 0.95,
});

export const CallOverlayDocked = style({
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  width: toRem(266),
  maxWidth: toRem(266),
  minWidth: toRem(266),
  borderRadius: 0,
  zIndex: 100,
  display: 'flex',
  flexDirection: 'column',
  transform: 'none !important',
  borderLeft: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
});

export const DockIndicator = style({
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  width: toRem(266),
  backgroundColor: color.Primary.Container,
  opacity: 0.5,
  zIndex: 9998,
  pointerEvents: 'none',
  borderLeft: `2px dashed ${color.Primary.Main}`,
});

export const SidebarDockIndicator = style({
  position: 'fixed',
  left: toRem(68), // After space panel (68px)
  bottom: 0,
  width: toRem(256), // Room list panel width
  height: toRem(120),
  backgroundColor: color.Primary.Container,
  opacity: 0.5,
  zIndex: 9998,
  pointerEvents: 'none',
  borderTop: `2px dashed ${color.Primary.Main}`,
  borderRight: `2px dashed ${color.Primary.Main}`,
});

export const SidebarDockedCallContainer = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S200,
  padding: config.space.S200,
  backgroundColor: color.Surface.Container,
  borderTop: `1px solid ${color.Surface.ContainerLine}`,
  marginTop: 'auto',
});

export const SidebarDockedCallHeader = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: config.space.S100,
  color: color.Surface.OnContainer,
  cursor: 'grab',
  padding: config.space.S100,
  borderRadius: config.radii.R200,
  selectors: {
    '&:hover': {
      backgroundColor: color.Surface.ContainerHover,
    },
  },
});

export const SidebarDockedCallControls = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  gap: config.space.S100,
});

export const DockedCallPanelLayout = style({
  width: toRem(266),
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: color.Background.Container,
  overflow: 'hidden',
});

export const DockedCallPanelContent = style({
  display: 'flex',
  flexDirection: 'column',
  height: '100%',
  padding: config.space.S300,
  backgroundColor: color.Surface.Container,
  color: color.Surface.OnContainer,
});

export const CallOverlayFullscreen = style({
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: '100vw',
  height: '100vh',
  maxWidth: 'none',
  borderRadius: 0,
  display: 'flex',
  flexDirection: 'column',
  transform: 'none !important',
});

export const CallOverlayHeader = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  marginBottom: config.space.S200,
  color: color.Surface.OnContainer,
});

export const CallOverlayControls = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  gap: config.space.S200,
});

export const CallDuration = style({
  fontVariantNumeric: 'tabular-nums',
  color: color.Surface.OnContainer,
});

export const VideoContainer = style({
  position: 'relative',
  width: '100%',
  aspectRatio: '16 / 9',
  backgroundColor: color.Surface.ContainerActive,
  borderRadius: config.radii.R300,
  marginBottom: config.space.S200,
  overflow: 'hidden',
  selectors: {
    [`${CallOverlayFullscreen} &`]: {
      flex: 1,
      aspectRatio: 'unset',
      borderRadius: 0,
      marginBottom: 0,
    },
  },
});

export const LocalVideo = style({
  position: 'absolute',
  bottom: config.space.S200,
  right: config.space.S200,
  width: '80px',
  aspectRatio: '4 / 3',
  backgroundColor: color.Surface.ContainerLine,
  borderRadius: config.radii.R300,
  overflow: 'hidden',
});

export const VideoElement = style({
  width: '100%',
  height: '100%',
  objectFit: 'cover',
});

export const ScreenShareContainer = style({
  position: 'relative',
  width: '100%',
  aspectRatio: '16 / 9',
  backgroundColor: color.Surface.ContainerActive,
  borderRadius: config.radii.R300,
  marginBottom: config.space.S200,
  overflow: 'hidden',
  border: `2px solid ${color.Primary.Main}`,
  selectors: {
    [`${CallOverlayFullscreen} &`]: {
      flex: 1,
      aspectRatio: 'unset',
      borderRadius: 0,
      marginBottom: 0,
    },
  },
});

export const ScreenShareVideoContainer = style({
  width: '100%',
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#000',
});

export const ScreenShareVideo = style({
  width: '100%',
  height: '100%',
  objectFit: 'contain',
});

export const ParticipantsSection = style({
  marginBottom: config.space.S200,
  borderRadius: config.radii.R300,
  backgroundColor: color.Surface.ContainerActive,
  overflow: 'hidden',
  selectors: {
    [`${CallOverlayDocked} &`]: {
      flex: 1,
      display: 'flex',
      flexDirection: 'column',
      overflow: 'auto',
    },
    [`${CallOverlayFullscreen} &`]: {
      flex: 1,
      display: 'flex',
      flexDirection: 'column',
      overflow: 'auto',
    },
  },
});

export const ParticipantsHeader = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  width: '100%',
  padding: `${config.space.S200} ${config.space.S300}`,
  backgroundColor: 'transparent',
  border: 'none',
  cursor: 'pointer',
  color: color.Surface.OnContainer,
  transition: 'background-color 0.15s ease',
  ':hover': {
    backgroundColor: color.Surface.ContainerHover,
  },
});

export const ParticipantsHeaderText = style({
  color: color.Surface.OnContainer,
});

export const ParticipantsList = style({
  padding: `0 ${config.space.S200} ${config.space.S200}`,
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S100,
});

export const ParticipantItem = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  padding: config.space.S200,
  borderRadius: config.radii.R300,
  backgroundColor: color.Surface.Container,
  transition: 'background-color 0.15s ease',
  ':hover': {
    backgroundColor: color.Surface.ContainerHover,
  },
});

export const ParticipantName = style({
  color: color.Surface.OnContainer,
  fontWeight: 500,
});

export const ParticipantId = style({
  color: color.Secondary.Main,
  opacity: 0.7,
});

export const YouBadge = style({
  color: color.Primary.Main,
  fontWeight: 600,
});

export const ParticipantMutedIcon = style({
  color: color.Critical.Main,
  flexShrink: 0,
});

export const ParticipantAvatarWrapper = style({
  position: 'relative',
  width: '32px',
  height: '32px',
  flexShrink: 0,
  borderRadius: '50%',
  transition: 'box-shadow 0.15s ease',
});

export const ParticipantAvatar = style({
  width: '32px',
  height: '32px',
  borderRadius: '50%',
});

export const ParticipantSpeaking = style({
  boxShadow: `0 0 0 2px ${color.Success.Main}`,
});

export const RemoteCursorOverlay = style({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  pointerEvents: 'none',
  overflow: 'hidden',
  zIndex: 10,
});

export const RemoteCursorDot = style({
  position: 'absolute',
  width: '12px',
  height: '12px',
  borderRadius: '50%',
  border: '2px solid white',
  boxShadow: '0 0 4px rgba(0,0,0,0.4)',
  transform: 'translate(-50%, -50%)',
  transition: 'left 0.05s linear, top 0.05s linear, opacity 0.2s ease',
  pointerEvents: 'none',
});

export const RemoteCursorLabel = style({
  position: 'absolute',
  transform: 'translate(-50%, 8px)',
  fontSize: '10px',
  fontWeight: 600,
  color: 'white',
  backgroundColor: 'rgba(0,0,0,0.6)',
  borderRadius: '4px',
  padding: '1px 5px',
  whiteSpace: 'nowrap',
  pointerEvents: 'none',
});