export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
  VIDEO: {
    container: {
      flex: 2,
      padding: '10px',
      minWidth: '300px',
    },
    iframe: {
      width: '100%',
      height: '100%',
      border: 'none',
    },
  },
  TRANSCRIPT: {
    container: {
      flex: 1,
      padding: '10px',
      overflowY: 'auto',
      maxHeight: '100%',
      minWidth: '200px',
      backgroundColor: 'var(--cc-navy-50)',
      borderLeft: '1px solid var(--cc-border)',
    },
    title: {
      margin: '0 0 10px 0',
      fontSize: '16px',
      fontWeight: 'bold',
      color: 'var(--cc-text-primary)',
    },
    line: {
      padding: '5px',
      marginBottom: '5px',
      borderRadius: '4px',
      fontSize: '14px',
      color: 'var(--cc-text-primary)',
      backgroundColor: 'var(--cc-bg-canvas)',
      border: '1px solid var(--cc-border-strong)',
    },
    activeLine: {
      backgroundColor: 'var(--cc-navy-50)',
      border: '1px solid var(--cc-action-primary)',
      color: 'var(--cc-action-primary)',
      fontWeight: 'bold',
      boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
      transform: 'scale(1.02)',
      transition: 'all 0.2s ease-in-out',
    },
    timestamp: {
      color: 'var(--cc-text-tertiary)',
      marginRight: '8px',
      fontWeight: 'bold',
    },
    loading: {
      color: 'var(--cc-text-muted)',
      fontStyle: 'italic',
    },
  },
  TOOLS: {
    container: {
      padding: '10px',
      display: 'flex',
      flexDirection: 'column' as const,
      gap: '10px',
    },
    button: {
      padding: '8px 12px',
      backgroundColor: 'var(--cc-navy-50)',
      border: '1px solid var(--cc-border)',
      borderRadius: '4px',
      cursor: 'pointer',
      color: 'var(--cc-text-primary)',
      fontSize: '14px',
      '&:hover': {
        backgroundColor: 'var(--cc-border-strong)',
      },
    },
  },
} as const